<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国贸易报社综合业务管理系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/remixicon/3.5.0/remixicon.css" rel="stylesheet">
    <style>
        :root {
            --primary-blue: #1677ff;
            --bg-gray: #f5f5f5;
            --text-primary: #262626;
            --text-secondary: rgba(0, 0, 0, 0.45);
            --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            background-color: var(--bg-gray);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            display: flex;
            flex-direction: column;
        }

        .top-nav {
            background: white;
            padding: 8px 16px;
            box-shadow: var(--card-shadow);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            z-index: 100;
        }

        .nav-left {
            display: flex;
            align-items: center;
            gap: 24px;
            flex: 1;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 15px;
            font-weight: 500;
            color: var(--text-primary);
            white-space: nowrap;
        }

        .logo-img {
            width: 28px;
            height: 28px;
            background-image: url({{ url_for('static', filename='images/CCPIT.png') }});
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .warning-banner {
            display: flex;
            align-items: center;
            gap: 6px;
            color: #d46b08;
            font-size: 13px;
            padding: 0 12px;
            border-left: 1px solid #d9d9d9;
            white-space: nowrap;
        }

        .main-container {
            display: flex;
            flex: 1;
            overflow: hidden;
            background: #f5f5f5;
            padding: 12px 0 12px 0;
            gap: 12px;
        }

        .left {
            flex: 0 0 280px;
            background: white;
            color: var(--text-primary);
            padding: 8px 0 8px 3px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow-y: auto;
            width: 280px;
            border: 1px solid #f0f0f0;
        }

        .left::-webkit-scrollbar {
            width: 4px;
        }

        .left::-webkit-scrollbar-track {
            background: #f5f5f5;
        }

        .left::-webkit-scrollbar-thumb {
            background: #e0e0e0;
            border-radius: 2px;
        }

        .left::-webkit-scrollbar-thumb:hover {
            background: #d0d0d0;
        }

        .right {
            flex: 1;
            padding: 12px;
            overflow-y: auto;
            background: white;
            border: 1px solid #f0f0f0;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
        }

        .user-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
        }

        .user-info span {
            font-size: 13px;
        }

        .user-dropdown-trigger {
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: all 0.3s;
        }

        .user-dropdown-trigger:hover {
            background: var(--bg-gray);
        }

        .user-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            min-width: 200px;
            z-index: 1000;
        }

        .user-dropdown.show {
            display: block;
        }

        .dropdown-item {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-primary);
            text-decoration: none;
            transition: all 0.3s;
        }

        .dropdown-item:hover {
            background: var(--bg-gray);
        }

        .dropdown-item:first-child {
            border-bottom: 1px solid var(--bg-gray);
            cursor: default;
        }

        .dropdown-item:last-child {
            color: #ff4d4f;
        }

        .section-title {
            margin: 0 0 12px;
            color: var(--text-primary);
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            padding-left: 12px;
            padding-bottom: 6px;
            border-bottom: 1px solid #f0f0f0;
        }

        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 16px;
            background: var(--text-primary);
            border-radius: 2px;
        }


        .section-title i {
            color: var(--text-primary);
            font-size: 18px;
        }

        .main-systems {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }

        .system-card {
            background: white;
            padding: 16px;
            text-align: left;
            transition: all 0.3s;
            cursor: pointer;
            border: 1px solid #e6f0ff;
            display: flex;
            flex-direction: column;
            gap: 12px;
            position: relative;
            box-shadow: 0 2px 8px rgba(0, 123, 255, 0.05);
        }

        .system-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(to bottom, #0052cc, #1677ff);
            opacity: 1;
        }

        .system-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
            border-color: #eeeeee;
        }

        .system-card .icon-wrapper {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #f0f5ff, #d6e4ff);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e6f0ff;
            border-radius: 8px;
        }

        .system-card i {
            font-size: 18px;
            color: #0052cc;
        }

        .system-card h3 {
            margin: 0;
            color: var(--text-primary);
            font-size: 15px;
            font-weight: 600;
        }

        .system-card p {
            margin: 0;
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1.5;
        }

        .sub-systems {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }

        .sub-system-card {
            background: white;
            padding: 14px;
            text-align: left;
            border: 1px solid #e6f0ff;
            transition: all 0.3s;
            cursor: pointer;
            position: relative;
            box-shadow: 0 2px 8px rgba(0, 123, 255, 0.05);
        }

        .sub-system-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(to bottom, #0052cc, #1677ff);
            opacity: 1;
        }

        .sub-system-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
            border-color: #eeeeee;
        }

        .sub-system-card .icon-wrapper {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, #f0f5ff, #d6e4ff);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            border: 1px solid #e6f0ff;
            border-radius: 8px;
        }

        .sub-system-card i {
            font-size: 16px;
            color: #0052cc;
        }

        .sub-system-card h4 {
            margin: 0 0 4px;
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 600;
        }

        .sub-system-card p {
            margin: 0;
            color: var(--text-secondary);
            font-size: 12px;
            line-height: 1.5;
        }

        .quick-links {
            background: white;
            padding: 12px;
            border: 1px solid #f0f0f0;
            margin-bottom: 24px;
        }

        .quick-links h2 {
            margin: 0 0 20px;
            color: var(--text-primary);
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            padding-left: 12px;
        }

        .quick-links h2::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 16px;
            background: var(--primary-blue);
            border-radius: 2px;
        }

        .quick-links h2 i {
            color: var(--text-primary);
            font-size: 18px;
        }

        .links-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }

        .quick-link-item {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            background: #f8f9fa;
            color: var(--text-primary);
            text-decoration: none;
            font-size: 13px;
            transition: all 0.3s;
            border: 1px solid #f0f0f0;
        }

        .quick-link-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-color: var(--primary-blue);
            color: var(--primary-blue);
        }

        .quick-link-item i {
            margin-right: 8px;
            font-size: 14px;
            color: var(--text-primary);
        }

        .search-bar {
            display: flex;
            gap: 6px;
            flex: 1;
            max-width: 400px;
            background: var(--bg-gray);
            border-radius: 4px;
            padding: 2px;
        }

        .search-input {
            flex: 1;
            padding: 6px 10px;
            border: none;
            background: transparent;
            font-size: 13px;
            color: var(--text-primary);
        }

        .search-input:focus {
            outline: none;
        }

        .search-input::placeholder {
            color: var(--text-secondary);
        }

        .search-button {
            padding: 6px 12px;
            background: white;
            color: var(--text-primary);
            border: none;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: all 0.3s;
            font-size: 13px;
        }

        .search-button:hover {
            background: #f0f0f0;
        }

        .nav-menu {
            list-style: none;
            padding: 0;
            margin: 0;
            background: white;
        }

        .nav-item {
            margin: 0;
        }

        .nav-link {
            display: flex;
            align-items: center;
            padding: 10px 20px;
            color: var(--text-primary);
            text-decoration: none;
            transition: all 0.3s;
            font-size: 14px;
            font-weight: 500;
            position: relative;
            cursor: pointer;
        }

        .nav-link:hover,
        .nav-link.active {
            background: #f5f5f5;
            color: var(--text-primary);
        }

        .nav-link.active {
            background: #f0f0f0;
            font-weight: 600;
        }

        .nav-link.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 4px;
            background: var(--primary-blue);
        }

        .nav-link i {
            margin-right: 12px;
            font-size: 18px;
            color: #8c8c8c;
            width: 20px;
            text-align: center;
            transition: all 0.3s;
        }

        .nav-link:hover i,
        .nav-link.active i {
            color: var(--primary-blue);
        }

        .nav-link .arrow {
            margin-left: auto;
            transition: transform 0.3s;
            color: #8c8c8c;
        }

        .nav-item.open .arrow {
            transform: rotate(90deg);
        }

        .nav-submenu {
            list-style: none;
            padding-left: 56px;
            margin: 0;
            display: none;
            background: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.6s ease-out;
        }

        .nav-item.open .nav-submenu {
            display: block;
            max-height: 1000px;
            transition: max-height 0.8s ease-in;
        }

        .nav-submenu .nav-link {
            padding: 6px 20px;
            font-size: 13px;
            font-weight: 400;
        }

        #content-area {
            flex: 1;
            overflow-y: auto;
            background: white;
            border: 1px solid #f0f0f0;
        }
        
        .content-section {
            display: none;
            padding: 12px;
        }
        
        .content-section.active {
            display: block;
        }
        
        .content-container {
            background: white;
            border-radius: 8px;
            padding: 24px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        /* 智能搜索框样式修改 */
        .smart-search-container {
            margin: 20px auto 30px;
            max-width: 700px;
            text-align: center;
        }
        
        .smart-search-title {
            margin-bottom: 15px;
            color: var(--text-primary);
            font-size: 18px;
            font-weight: 600;
        }
        
        .smart-search-input-container {
            display: flex;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
            background: white;
            transition: all 0.3s;
            border: 1px solid #e8e8e8;
        }
        
        .smart-search-input-container:focus-within {
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
            transform: translateY(-2px);
            border-color: var(--primary-blue);
        }
        
        .smart-search-input {
            flex: 1;
            padding: 14px 18px;
            border: none;
            font-size: 15px;
            background: transparent;
            color: var(--text-primary);
        }
        
        .smart-search-input:focus {
            outline: none;
        }
        
        .smart-search-input::placeholder {
            color: #a0a0a0;
        }
        
        .smart-search-button {
            background: var(--primary-blue);
            color: white;
            border: none;
            padding: 14px 22px;
            font-size: 15px;
            cursor: pointer;
            transition: background 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
        }
        
        .smart-search-button:hover {
            background: #0052cc;
        }

        /* 修改颜色为更深的蓝色和橙色 */
        .system-card::before {
            background: linear-gradient(to bottom, #0052cc, #1677ff);
        }
        
        .system-card .icon-wrapper {
            background: linear-gradient(135deg, #f0f5ff, #d6e4ff);
        }
        
        .system-card i {
            color: #0052cc;
        }
        
        .system-card.orange::before {
            background: linear-gradient(to bottom, #ff3300, #ff3300);
        }
        
        .system-card.orange .icon-wrapper {
            background: linear-gradient(135deg, #ffffff, #ffffff);
        }
        
        .system-card.orange i {
            color: #ff3300;
        }
        
        /* 缩小卡片布局尺寸 */
        .main-systems {
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }
        
        .system-card {
            padding: 16px;
            gap: 12px;
        }
        
        .system-card .icon-wrapper {
            width: 36px;
            height: 36px;
        }
        
        .system-card i {
            font-size: 18px;
        }
        
        .system-card h3 {
            font-size: 15px;
        }
        
        .system-card p {
            font-size: 13px;
        }
        
        .sub-systems {
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }
        
        .sub-system-card {
            padding: 14px;
        }
        
        .sub-system-card .icon-wrapper {
            width: 32px;
            height: 32px;
            margin-bottom: 8px;
        }
        
        .sub-system-card i {
            font-size: 16px;
        }
        
        .sub-system-card h4 {
            font-size: 14px;
        }
        
        .sub-system-card p {
            font-size: 12px;
        }
        
        .quick-links {
            padding: 12px;
            margin-bottom: 24px;
        }
        
        .links-grid {
            gap: 12px;
        }
        
        .quick-link-item {
            padding: 10px 12px;
            font-size: 13px;
        }
        
        .quick-link-item i {
            font-size: 14px;
        }

        /* 添加业务卡片右上角数字标记 */
        .system-card {
            position: relative;
            overflow: hidden;
        }
        
        .card-badge {
            position: absolute;
            top: 0;
            right: 0;
            background: linear-gradient(135deg, #ff4d4f, #ff7875);
            color: white;
            font-size: 12px;
            font-weight: 600;
            min-width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom-left-radius: 6px;
            box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
            transform: translateX(2px) translateY(-2px);
            z-index: 2;
        }


        .card-badge-blue {
            position: absolute;
            top: 0;
            right: 0;
            background: linear-gradient(135deg, #2d60eb, rgb(117, 154, 255));
            color: white;
            font-size: 12px;
            font-weight: 600;
            min-width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom-left-radius: 6px;
            box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
            transform: translateX(2px) translateY(-2px);
            z-index: 2;
        }
        
        
        /* 红色调的快捷入口 */
        .quick-link-item.red {
            background: #fff1f0;
            border-color: #ffccc7;
            transition: all 0.3s;
        }
        
        .quick-link-item.red:hover {
            border-color: #ff4d4f;
            color: #ff4d4f;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 77, 79, 0.15);
        }
        
        .quick-link-item.red i {
            color: #ff4d4f;
        }
        
        .quick-link-item.deep-red {
            background: #fff0f6;
            border-color: #ffadd2;
            transition: all 0.3s;
        }
        
        .quick-link-item.deep-red:hover {
            border-color: #eb2f96;
            color: #eb2f96;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(235, 47, 150, 0.15);
        }
        
        .quick-link-item.deep-red i {
            color: #eb2f96;
        }
        
        /* 修改section标题颜色 */
        .section-title.red::before {
            background: #ff4d4f;
        }
        
        .section-title.red i {
            color: #ff4d4f;
        }

        /* 花名册模块样式 */
        .roster-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 24px;
        }
        
        .stat-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 16px;
            border: 1px solid #f0f0f0;
        }
        
        .stat-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #fff1f0, #ffccc7);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .stat-icon i {
            font-size: 24px;
            color: #ff4d4f;
        }
        
        .stat-info {
            flex: 1;
        }
        
        .stat-value {
            font-size: 24px;
            font-weight: 600;
            color: #262626;
            line-height: 1;
            margin-bottom: 4px;
        }
        
        .stat-label {
            font-size: 14px;
            color: #8c8c8c;
        }
        
        .roster-filter {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            padding: 16px;
            margin-bottom: 24px;
            border: 1px solid #f0f0f0;
        }
        
        .search-container {
            display: flex;
            margin-bottom: 16px;
        }
        
        .roster-search {
            flex: 1;
            padding: 10px 16px;
            border: 1px solid #d9d9d9;
            border-radius: 4px 0 0 4px;
            font-size: 14px;
        }
        
        .roster-search:focus {
            outline: none;
            border-color: #ff4d4f;
        }
        
        .roster-search-btn {
            background: #ff4d4f;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            padding: 0 16px;
            cursor: pointer;
        }
        
        .filter-options {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        
        .filter-select {
            padding: 8px 16px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 14px;
            min-width: 120px;
        }
        
        .filter-select:focus {
            outline: none;
            border-color: #ff4d4f;
        }
        
        .filter-btn {
            padding: 8px 16px;
            background: #ff4d4f;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .filter-reset-btn {
            padding: 8px 16px;
            background: white;
            color: #262626;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .roster-table-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            padding: 16px;
            overflow-x: auto;
            margin-bottom: 16px;
            border: 1px solid #f0f0f0;
        }
        
        .roster-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        .roster-table th {
            background: #fafafa;
            padding: 12px 16px;
            text-align: left;
            font-weight: 600;
            color: #262626;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .roster-table td {
            padding: 12px 16px;
            border-bottom: 1px solid #f0f0f0;
            color: #262626;
        }
        
        .roster-table tbody tr:hover {
            background: #fff1f0;
        }
        
        .employee-name {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .employee-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .status-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .status-badge.active {
            background: #e6f7ff;
            color: #1890ff;
        }
        
        .status-badge.leave {
            background: #fff7e6;
            color: #fa8c16;
        }
        
        .status-badge.travel {
            background: #f6ffed;
            color: #52c41a;
        }
        
        .status-badge.inactive {
            background: #f5f5f5;
            color: #8c8c8c;
        }
        
        .action-buttons {
            display: flex;
            gap: 8px;
        }
        
        .action-btn {
            width: 28px;
            height: 28px;
            border-radius: 4px;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        .action-btn.view {
            background: #e6f7ff;
            color: #1890ff;
        }
        
        .action-btn.edit {
            background: #fff1f0;
            color: #ff4d4f;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 16px;
        }
        
        .page-btn {
            width: 32px;
            height: 32px;
            border: 1px solid #d9d9d9;
            background: white;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px;
        }
        
        .page-btn.active {
            background: #ff4d4f;
            color: white;
            border-color: #ff4d4f;
        }
        
        .page-ellipsis {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            font-size: 14px;
            color: #8c8c8c;
        }

        /* 薪资测算模块样式 */
        .salary-calc-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 24px;
        }
        
        .salary-stat-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            padding: 16px;
            text-align: center;
            border: 1px solid #f0f0f0;
            position: relative;
            overflow: hidden;
        }
        
        .salary-stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(to right, #ff4d4f, #ff7875);
        }
        
        .salary-stat-card .stat-value {
            font-size: 24px;
            font-weight: 600;
            color: #262626;
            margin-bottom: 8px;
        }
        
        .salary-stat-card .stat-label {
            font-size: 14px;
            color: #8c8c8c;
        }
        
        .salary-calc-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }
        
        .salary-calc-form {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            padding: 24px;
            border: 1px solid #f0f0f0;
        }
        
        .form-header {
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .form-header h3 {
            margin: 0 0 8px;
            font-size: 18px;
            color: #262626;
        }
        
        .form-header p {
            margin: 0;
            font-size: 14px;
            color: #8c8c8c;
        }
        
        .form-section {
            margin-bottom: 24px;
        }
        
        .section-label {
            margin: 0 0 16px;
            font-size: 16px;
            color: #262626;
            display: flex;
            align-items: center;
            position: relative;
            padding-left: 12px;
        }
        
        .section-label::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 16px;
            background: #ff4d4f;
            border-radius: 2px;
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 16px;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .form-group label {
            font-size: 14px;
            color: #262626;
        }
        
        .form-control {
            padding: 8px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .form-control:focus {
            outline: none;
            border-color: #ff4d4f;
        }
        
        .form-actions {
            display: flex;
            gap: 16px;
            margin-top: 24px;
        }
        
        .btn-calculate {
            padding: 10px 20px;
            background: #ff4d4f;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .btn-calculate:hover {
            background: #ff3333;
        }
        
        .btn-reset {
            padding: 10px 20px;
            background: white;
            color: #262626;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn-reset:hover {
            border-color: #ff4d4f;
            color: #ff4d4f;
        }
        
        .salary-calc-result {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            padding: 24px;
            border: 1px solid #f0f0f0;
            display: flex;
            flex-direction: column;
        }
        
        .result-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .result-header h3 {
            margin: 0;
            font-size: 18px;
            color: #262626;
        }
        
        .result-date {
            font-size: 14px;
            color: #8c8c8c;
        }
        
        .result-summary {
            margin-bottom: 24px;
        }
        
        .total-salary {
            background: linear-gradient(to right, #ff4d4f, #ff7875);
            padding: 20px;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .total-label {
            font-size: 16px;
            color: white;
            font-weight: 500;
        }
        
        .total-value {
            font-size: 24px;
            color: white;
            font-weight: 600;
        }
        
        .salary-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
        
        .detail-item {
            padding: 16px;
            background: #f9f9f9;
            border-radius: 8px;
            text-align: center;
        }
        
        .detail-label {
            font-size: 14px;
            color: #8c8c8c;
            margin-bottom: 8px;
        }
        
        .detail-value {
            font-size: 18px;
            font-weight: 600;
            color: #262626;
        }
        
        .salary-chart {
            margin-bottom: 24px;
        }
        
        .chart-title {
            font-size: 16px;
            color: #262626;
            margin-bottom: 16px;
        }
        
        .chart-container {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .chart-item {
            margin-bottom: 8px;
        }
        
        .chart-bar {
            height: 24px;
            border-radius: 4px;
            margin-bottom: 4px;
        }
        
        .chart-bar.basic {
            background: #ff4d4f;
        }
        
        .chart-bar.performance {
            background: #faad14;
        }
        
        .chart-bar.allowance {
            background: #52c41a;
        }
        
        .chart-label {
            font-size: 12px;
            color: #8c8c8c;
        }
        
        .action-buttons {
            display: flex;
            gap: 16px;
            margin-top: auto;
        }
        
        .btn-export, .btn-print {
            padding: 10px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn-export {
            background: #f5f5f5;
            color: #262626;
            border: 1px solid #d9d9d9;
        }
        
        .btn-export:hover {
            background: #e8e8e8;
        }
        
        .btn-print {
            background: white;
            color: #ff4d4f;
            border: 1px solid #ff4d4f;
        }
        
        .btn-print:hover {
            background: #fff1f0;
        }

        /* 我的薪资模块样式 */
        .salary-overview {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 24px;
        }
        
        .overview-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border: 1px solid #f0f0f0;
        }
        
        .overview-card.primary {
            background: linear-gradient(135deg, #ff4d4f, #ff7875);
            color: white;
        }
        
        .overview-card .card-icon {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
        }
        
        .overview-card .card-icon i {
            font-size: 24px;
            color: #ff4d4f;
        }
        
        .overview-card.primary .card-icon {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .overview-card.primary .card-icon i {
            color: white;
        }
        
        .card-info .info-label {
            font-size: 14px;
            color: #8c8c8c;
            margin-bottom: 8px;
        }
        
        .card-info .info-value {
            font-size: 24px;
            font-weight: 600;
            color: #262626;
            margin-bottom: 8px;
        }
        
        .overview-card.primary .card-info .info-label,
        .overview-card.primary .card-info .info-value,
        .overview-card.primary .card-info .info-trend {
            color: white;
        }
        
        .info-trend {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
        }
        
        .info-trend.positive {
            color: #52c41a;
        }
        
        .info-trend.negative {
            color: #ff4d4f;
        }
        
        .info-trend.neutral {
            color: #8c8c8c;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .section-header h3 {
            margin: 0;
            font-size: 16px;
            color: #262626;
        }
        
        .header-actions {
            display: flex;
            gap: 12px;
        }
        
        .year-select {
            padding: 6px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .export-btn {
            padding: 6px 16px;
            background: white;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .export-btn:hover {
            border-color: #ff4d4f;
            color: #ff4d4f;
        }
        
        .history-table {
            margin-bottom: 24px;
            overflow-x: auto;
        }
        
        .history-table table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .history-table th {
            background: #fafafa;
            padding: 12px 16px;
            text-align: left;
            font-weight: 600;
            color: #262626;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .history-table td {
            padding: 12px 16px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .history-table td.highlight {
            color: #ff4d4f;
            font-weight: 600;
        }
        
        .status {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
        }
        
        .status.success {
            background: #f6ffed;
            color: #52c41a;
        }
        
        .detail-btn {
            padding: 4px 12px;
            background: white;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .detail-btn:hover {
            border-color: #ff4d4f;
            color: #ff4d4f;
        }
        
        .analysis-charts {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }
        
        .chart-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border: 1px solid #f0f0f0;
        }
        
        .chart-card h4 {
            margin: 0 0 16px;
            font-size: 16px;
            color: #262626;
        }
        
        .pie-chart-placeholder,
        .line-chart-placeholder {
            height: 200px;
            background: #fafafa;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
        }
        
        .chart-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: #8c8c8c;
        }
        
        .color-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }
        
        .color-dot.basic {
            background: #ff4d4f;
        }
        
        .color-dot.performance {
            background: #faad14;
        }
        
        .color-dot.allowance {
            background: #52c41a;
        }
        
        .color-dot.deduction {
            background: #8c8c8c;
        }
        
        .trend-point {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .point-label {
            font-size: 12px;
            color: #8c8c8c;
        }
        
        .point-value {
            font-size: 14px;
            font-weight: 600;
            color: #262626;
        }
        
        .point-date {
            font-size: 12px;
            color: #8c8c8c;
        }

        /* 绩效管理模块样式 */
        .performance-overview {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 24px;
        }
        
        .performance-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border: 1px solid #f0f0f0;
            position: relative;
            overflow: hidden;
        }
        
        .performance-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(to right, #ff4d4f, #ff7875);
        }
        
        .performance-card.excellent::before {
            background: linear-gradient(to right, #52c41a, #95de64);
        }
        
        .performance-card.good::before {
            background: linear-gradient(to right, #1890ff, #69c0ff);
        }
        
        .performance-card.average::before {
            background: linear-gradient(to right, #faad14, #ffd666);
        }
        
        .performance-score {
            font-size: 36px;
            font-weight: 600;
            color: #262626;
            margin-bottom: 8px;
        }
        
        .performance-label {
            font-size: 14px;
            color: #8c8c8c;
            margin-bottom: 16px;
        }
        
        .performance-trend {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
        }
        
        .performance-trend.up {
            color: #52c41a;
        }
        
        .performance-trend.down {
            color: #ff4d4f;
        }
        
        .performance-trend.flat {
            color: #8c8c8c;
        }
        
        .assessment-table {
            margin-bottom: 24px;
        }
        
        .assessment-table table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .assessment-table th {
            background: #fafafa;
            padding: 12px 16px;
            text-align: left;
            font-weight: 600;
            color: #262626;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .assessment-table td {
            padding: 12px 16px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .score-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .score-badge.excellent {
            background: #f6ffed;
            color: #52c41a;
        }
        
        .score-badge.good {
            background: #e6f7ff;
            color: #1890ff;
        }
        
        .score-badge.average {
            background: #fff7e6;
            color: #faad14;
        }
        
        .score-badge.poor {
            background: #fff1f0;
            color: #ff4d4f;
        }
        
        .feedback-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border: 1px solid #f0f0f0;
            margin-bottom: 24px;
        }
        
        .feedback-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .feedback-title {
            font-size: 16px;
            font-weight: 600;
            color: #262626;
            margin: 0;
        }
        
        .feedback-date {
            font-size: 14px;
            color: #8c8c8c;
        }
        
        .feedback-content {
            color: #262626;
            line-height: 1.6;
            margin-bottom: 16px;
        }
        
        .feedback-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .feedback-tag {
            padding: 2px 8px;
            background: #f5f5f5;
            border-radius: 4px;
            font-size: 12px;
            color: #8c8c8c;
        }

        /* 工作台样式优化 */
        .workspace-section {
            background: linear-gradient(135deg, #f8f9fe 0%, #f0f3fa 100%);
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 24px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        }

        .quick-entry {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }

        .quick-link-item {
            background: white;
            border-radius: 12px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.05);
            position: relative;
            overflow: hidden;
        }

        .quick-link-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .quick-link-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        .quick-link-item:hover::before {
            opacity: 1;
        }

        /* 新的配色方案 */
        .quick-link-item.business {
            background: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
            color: white;
        }

        .quick-link-item.finance {
            background: linear-gradient(135deg, #00a389 0%, #007a66 100%);
            color: white;
        }

        .quick-link-item.hr {
            background: linear-gradient(135deg, #e94235 0%, #b31f1f 100%);
            color: white;
        }

        .quick-link-item.project {
            background: linear-gradient(135deg, #7627c4 0%, #5b1e96 100%);
            color: white;
        }

        .quick-link-item.data {
            background: linear-gradient(135deg, #ff6b00 0%, #cc5500 100%);
            color: white;
        }

        .quick-link-item.settings {
            background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
            color: white;
        }

        .quick-link-item i {
            font-size: 24px;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        .quick-link-item:hover i {
            background: rgba(255, 255, 255, 0.25);
            transform: scale(1.1);
        }

        .quick-link-content {
            flex: 1;
        }

        .quick-link-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
            color: inherit;
        }

        .quick-link-desc {
            font-size: 13px;
            opacity: 0.85;
            color: inherit;
        }

        /* 工作台标题样式优化 */
        .section-title {
            font-size: 18px;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .section-title i {
            font-size: 24px;
            color: #1a73e8;
        }

        /* 数据统计卡片样式优化 */
        .stat-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        .stat-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }

        .stat-title {
            font-size: 15px;
            color: #666;
        }

        .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
            background: linear-gradient(135deg, #1a73e8, #1557b0);
        }

        /* 展览业务模块样式 */
        .exhibition-header {
            background: linear-gradient(135deg, #f8f9fe 0%, #f0f3fa 100%);
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .exhibition-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-bottom: 24px;
        }

        .exhibition-stat-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border: 1px solid #f0f0f0;
            transition: all 0.3s ease;
        }

        .exhibition-stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        .stat-value {
            font-size: 24px;
            font-weight: 600;
            color: #1a73e8;
            margin-bottom: 8px;
        }

        .stat-label {
            font-size: 14px;
            color: #666;
        }

        .exhibition-filters {
            display: flex;
            gap: 16px;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }

        .filter-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .filter-label {
            font-size: 14px;
            color: #666;
        }

        .filter-select {
            padding: 8px 16px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            font-size: 14px;
            color: #262626;
            min-width: 120px;
        }

        .search-box {
            flex: 1;
            position: relative;
        }

        .search-input {
            width: 100%;
            padding: 8px 16px;
            padding-left: 40px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            font-size: 14px;
        }

        .search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }

        .exhibition-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 24px;
            margin-bottom: 24px;
        }

        .exhibition-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border: 1px solid #f0f0f0;
            transition: all 0.3s ease;
        }

        .exhibition-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        .exhibition-image {
            width: 100%;
            height: 180px;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .exhibition-status {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            color: white;
        }

        .status-upcoming {
            background: #1a73e8;
        }

        .status-ongoing {
            background: #00a389;
        }

        .status-completed {
            background: #666;
        }

        .exhibition-content {
            padding: 20px;
        }

        .exhibition-title {
            font-size: 16px;
            font-weight: 600;
            color: #262626;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .exhibition-info {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 16px;
        }

        .info-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: #666;
        }

        .info-item i {
            font-size: 16px;
            color: #1a73e8;
        }

        .exhibition-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }

        .exhibition-tag {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            background: #f5f5f5;
            color: #666;
        }

        .exhibition-actions {
            display: flex;
            gap: 12px;
        }

        .action-btn {
            flex: 1;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: #1a73e8;
            color: white;
        }

        .btn-primary:hover {
            background: #1557b0;
        }

        .btn-secondary {
            background: white;
            border: 1px solid #1a73e8;
            color: #1a73e8;
        }

        .btn-secondary:hover {
            background: #f8f9fe;
        }

        /* 全球展览信息矩阵样式 */
        .matrix-view {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }

        .matrix-card {
            background: white;
            border-radius: 12px;
            padding: 16px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border: 1px solid #f0f0f0;
            transition: all 0.3s ease;
        }

        .matrix-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        .matrix-icon {
            width: 48px;
            height: 48px;
            margin: 0 auto 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f5f5f5;
            border-radius: 24px;
            color: #1a73e8;
            font-size: 24px;
        }

        .matrix-title {
            font-size: 15px;
            font-weight: 600;
            color: #262626;
            margin-bottom: 8px;
        }

        .matrix-value {
            font-size: 24px;
            font-weight: 600;
            color: #1a73e8;
            margin-bottom: 4px;
        }

        .matrix-trend {
            font-size: 13px;
            color: #52c41a;
        }

        .matrix-trend.down {
            color: #ff4d4f;
        }

        /* 展览业务详细页面样式补充 */
        .exhibition-detail-header {
            background: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
            color: white;
            padding: 40px;
            border-radius: 12px;
            margin-bottom: 24px;
        }

        .detail-header-content {
            max-width: 1200px;
            margin: 0 auto;
        }

        .detail-title {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 16px;
        }

        .detail-meta {
            display: flex;
            gap: 24px;
            margin-bottom: 24px;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            opacity: 0.9;
        }

        .detail-actions {
            display: flex;
            gap: 16px;
        }

        .detail-btn {
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn-white {
            background: white;
            color: #1a73e8;
        }

        .btn-white:hover {
            background: rgba(255, 255, 255, 0.9);
        }

        .btn-outline-white {
            background: transparent;
            border: 1px solid white;
            color: white;
        }

        .btn-outline-white:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .detail-tabs {
            display: flex;
            gap: 32px;
            border-bottom: 1px solid #e8e8e8;
            margin-bottom: 24px;
            padding: 0 24px;
        }

        .detail-tab {
            padding: 16px 0;
            font-size: 15px;
            font-weight: 500;
            color: #666;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
        }

        .detail-tab.active {
            color: #1a73e8;
        }

        .detail-tab.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 2px;
            background: #1a73e8;
        }

        .detail-tab:hover {
            color: #1a73e8;
        }

        .detail-content {
            padding: 24px;
        }

        .content-section {
            margin-bottom: 32px;
        }

        .section-title {
            font-size: 18px;
            font-weight: 600;
            color: #262626;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .timeline {
            position: relative;
            padding-left: 24px;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #e8e8e8;
        }

        .timeline-item {
            position: relative;
            padding-bottom: 24px;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: -29px;
            top: 0;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #1a73e8;
            border: 2px solid white;
        }

        .timeline-date {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
        }

        .timeline-content {
            background: white;
            border-radius: 8px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .matrix-detail-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
            margin-bottom: 32px;
        }

        .matrix-detail-card {
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        }

        .matrix-chart {
            height: 200px;
            margin-bottom: 16px;
            background: #f5f5f5;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .matrix-data-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .matrix-data-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .data-label {
            font-size: 14px;
            color: #666;
        }

        .data-value {
            font-size: 14px;
            font-weight: 500;
            color: #262626;
        }

        .trend-indicator {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
        }

        .trend-up {
            color: #52c41a;
        }

        .trend-down {
            color: #ff4d4f;
        }

        .trend-neutral {
            color: #666;
        }

        .exhibition-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }

        .gallery-item {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
        }

        .gallery-item img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            transition: all 0.3s ease;
        }

        .gallery-item:hover img {
            transform: scale(1.05);
        }

        .gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 12px;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            color: white;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div class="top-nav">
        <div class="nav-left">
            <div class="logo">
                <div class="logo-img"></div>
                <span>中国贸易报社有限公司综合业务系统</span>
            </div>
            <div class="search-bar">
                <input type="text" class="search-input" placeholder="搜索系统功能、文档、帮助...">
                <button class="search-button">
                    <i class="ri-search-line"></i>
                    搜索
                </button>
            </div>
        </div>
        <div class="user-info">
            <div class="warning-banner">
                <i class="ri-error-warning-line"></i>
                <span>请勿发布涉密和敏感信息</span>
            </div>
            <img src="{{ url_for('static', filename='images/header.jpeg') }}" alt="用户头像" class="user-avatar">
            <span>你好，{{ user }}</span>
            <div class="user-dropdown-trigger" onclick="toggleDropdown()">
                <i class="ri-arrow-down-s-line"></i>
            </div>
            <div class="user-dropdown" id="userDropdown">
                <div class="dropdown-item">
                    <i class="ri-user-line"></i>
                    {{ user }}
                </div>
                <a href="#" class="dropdown-item">
                    <i class="ri-shield-user-line"></i>
                    账号与安全
                </a>
                <a href="#" class="dropdown-item">
                    <i class="ri-user-settings-line"></i>
                    个人资料
                </a>
                <a href="/oauth/logout" class="dropdown-item">
                    <i class="ri-logout-box-line"></i>
                    退出登录
                </a>
            </div>
        </div>
    </div>

    <div class="main-container">
        <p style="width: .5px;opacity: 0;">0</p>
        <div class="left" id="sidebar">
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#dashboard" class="nav-link active" onclick="showSection('dashboard'); return false;">
                        <i class="ri-dashboard-line"></i>
                        工作台
                    </a>
                </li>
                <li class="nav-item">
                    <a   class="nav-link" onclick="toggleSubmenu(this)">
                        <i class="ri-building-line"></i>
                        内部管理系统
                        <i class="ri-arrow-right-s-line arrow"></i>
                    </a>
                    <ul class="nav-submenu">
                        <li><a href="#roster" class="nav-link" onclick="window.open('http://inm.ccpititc.com/user', '_blank');
                    return false;">
                            <i class="ri-price-tag-2-fill"></i>
                            花名册</a></li>
                        <li><a href="#salary-calc" class="nav-link" onclick="showSection('salary-calc'); return false;"><i class="ri-calculator-line"></i>薪资测算</a></li>
                        <li><a href="#my-salary" class="nav-link" onclick="showSection('my-salary'); return false;"><i class="ri-money-dollar-circle-line"></i>我的工资</a></li>
                        <li><a href="#performance" class="nav-link" onclick="showSection('performance'); return false;"><i class="ri-medal-line"></i>绩效管理</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a  class="nav-link" onclick="toggleSubmenu(this)">
                        <i class="ri-table-2"></i>
                        展览业务
                        <i class="ri-arrow-right-s-line arrow"></i>
                    </a>
                    <ul class="nav-submenu">
                        <li><a href="#overseas" class="nav-link" onclick="showSection('overseas'); return false;"><i class="ri-global-line"></i>外展业务</a></li>
                        <li><a href="#gem" class="nav-link" onclick="showSection('gem'); return false;"><i class="ri-grid-line"></i>全球展览信息矩阵
                        (golbal exhibition matrix)
                        </a></li>
                        <li><a href="#ccpit" class="nav-link" onclick="showSection('ccpit'); return false;"><i class="ri-building-2-line"></i>中国展览会和博览会</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" onclick="toggleSubmenu(this)">
                        <i class="ri-scales-line"></i>
                        法律业务
                        <i class="ri-arrow-right-s-line arrow"></i>
                    </a>
                    <ul class="nav-submenu">
                        <li><a href="#name-search" class="nav-link" onclick="showSection('name-search'); return false;"><i class="ri-search-line"></i>法律查名</a></li>
                        <li><a href="#regulations" class="nav-link" onclick="showSection('regulations'); return false;"><i class="ri-book-line"></i>国外法律法规</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a  class="nav-link" onclick="toggleSubmenu(this)">
                        <i class="ri-edit-line"></i>
                        媒体采编
                        <i class="ri-arrow-right-s-line arrow"></i>
                    </a>
                    <ul class="nav-submenu">
                        <li><a onclick="window.open('http://math-x-studio.cn/', '_blank');window.close();"
                            target="_blank"
                            class="nav-link" ><i class="ri-article-line"></i>采编系统</a></li>
                        <li><a href="#editorcontent" class="nav-link" onclick="showSection('editorcontent'); return false;"><i class="ri-article-line"></i>媒资系统</a></li>
                        <li><a href="#materials" class="nav-link" onclick="showSection('materials'); return false;"><i class="ri-folder-line"></i>采编素材库</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" onclick="toggleSubmenu(this)">
                        <i class="ri-global-line"></i>
                        内容发布
                        <i class="ri-arrow-right-s-line arrow"></i>
                    </a>
                    <ul class="nav-submenu">
                        <li><a href="#sites" class="nav-link" onclick="showSection('sites'); return false;"><i class="ri-layout-line"></i>站点管理</a></li>
                        <li><a href="#articles" class="nav-link" onclick="showSection('articles'); return false;"><i class="ri-article-line"></i>文章</a></li>
                        <li><a href="#categories" class="nav-link" onclick="showSection('categories'); return false;"><i class="ri-menu-line"></i>栏目</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a  class="nav-link" onclick="toggleSubmenu(this)">
                        <i class="ri-customer-service-line"></i>
                        客服服务
                        <i class="ri-arrow-right-s-line arrow"></i>
                    </a>
                    <ul class="nav-submenu">
                        <li><a href="#reports" class="nav-link" onclick="showSection('reports'); return false;"><i class="ri-bar-chart-line"></i>业务报表</a></li>
                        <li><a href="#ai-service" class="nav-link" onclick="showSection('ai-service'); return false;"><i class="ri-robot-line"></i>智能客服</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" onclick="toggleSubmenu(this)">
                        <i class="ri-question-line"></i>
                        帮助中心
                        <i class="ri-arrow-right-s-line arrow"></i>
                    </a>
                    <ul class="nav-submenu">
                        <li><a href="#docs" class="nav-link" onclick="showSection('docs'); return false;"><i class="ri-book-open-line"></i>帮助文档</a></li>
                        <li><a href="#changelog" class="nav-link" onclick="showSection('changelog'); return false;"><i class="ri-history-line"></i>更新日志</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" onclick="toggleSubmenu(this)">
                        <i class="ri-tools-line"></i>
                        自动化工具
                        <i class="ri-arrow-right-s-line arrow"></i>
                    </a>
                    <ul class="nav-submenu">
                        <li><a href="#index-tools" class="nav-link" onclick="showSection('index-tools'); return false;"><i class="ri-list-check"></i>索引编排</a></li>
                        <li><a href="#image-search" class="nav-link" onclick="showSection('image-search'); return false;"><i class="ri-image-line"></i>图片查询</a></li>
                        <li><a href="#other-tools" class="nav-link" onclick="showSection('other-tools'); return false;"><i class="ri-more-line"></i>其它</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="#settings" class="nav-link" onclick="showSection('settings'); return false;">
                        <i class="ri-settings-line"></i>
                        系统设置
                    </a>
                </li>
            </ul>
        </div>

        <div id="content-area">
            <div id="dashboard" class="content-section active">
                <h2 class="section-title">
                    <i class="ri-dashboard-line"></i>
                    工作台
                </h2>
                
                <!-- 修改智能搜索框标题和样式 -->
                <div class="smart-search-container">
                    <div class="smart-search-title">
                        <!-- <p style="font-family: 仿宋;" >AI小贸</p> -->
                    </div>
                    <div class="smart-search-input-container">
                        <input type="text" class="smart-search-input" placeholder="请输入您的问题或需求，例如：如何查询我的绩效数据？">
                        <button class="smart-search-button">
                           AI
                            智能导航
                        </button>
                    </div>
                </div>
                <h2 class="section-title red">
                    <i class="ri-grid-line "></i>
                    核心业务
                </h2>
                <div class="main-systems">
                    
                    <div class="system-card orange" onclick="window.open('https://gem.ccpititc.com/', '_blank');
                    return false;">
                        <div class="card-badge"></div>
                        <div class="icon-wrapper">
                            <i class="ri-global-line"></i>
                        </div>
                        <h3>外展业务</h3>
                        <p>外展业务管理、数据统计与业绩分析</p>
                    </div>
                    <div class="system-card orange" onclick="showSection('gem'); return false;">
                        <div class="card-badge"></div>
                        <div class="icon-wrapper">
                            <i class="ri-grid-line"></i>
                        </div>
                        <h3>全球展会信息矩阵</h3>
                        <p>全球展览信息矩阵 (Global Exhibition Matrix)</p>
                    </div>
                    <div class="system-card orange" onclick="showSection('ccpit'); return false;">
                        <div class="card-badge"></div>
                        <div class="icon-wrapper">
                            <i class="ri-building-2-line"></i>
                        </div>
                        <h3>中展博</h3>
                        <p>中国贸促会展览信息平台</p>
                    </div>
                    <div class="system-card orange" onclick="window.open('http://math-x-studio.cn/', '_blank');window.close();">
                        <div class="card-badge"></div>
                        <div class="icon-wrapper">
                            <i class="ri-article-line"></i>
                        </div>
                        <h3>采编系统</h3>
                        <p>新闻采集与编辑工作平台，提供完整的采编流程管理</p>
                    </div>
                    <div class="system-card orange" onclick="window.open('http://inm.ccpititc.com/', '_blank');
                    return false;">
                        <div class="card-badge"></div>
                        <div class="icon-wrapper">
                            <i class="ri-layout-line"></i>
                        </div>
                        <h3>内容管理系统</h3>
                        <p>新闻内容管理与发布平台，支持多维度内容管理、审核与发布</p>
                    </div>
                    <div class="system-card orange" onclick="showSection('performance'); return false;">
                        <div class="card-badge"></div>
                        <div class="icon-wrapper">
                            <i class="ri-medal-line"></i>
                        </div>
                        <h3>绩效系统</h3>
                        <p>员工绩效考核与管理，实现数据驱动的绩效评估</p>
                    </div>
                </div>

                <h2 class="section-title">
                    <i class="ri-grid-line "></i>
                    快捷子系统
                </h2>
                <div class="sub-systems">
                    <div class="sub-system-card ">
                        <div class="card-badge-blue" ></div>
                        <div class="icon-wrapper">
                            <i class="ri-medal-line"></i>
                        </div>
                        <h4>个人绩效</h4>
                        <p>绩效查询与统计分析</p>
                    </div>
                    <div class="sub-system-card orange">
                        <div class="card-badge-blue"></div>
                        <div class="icon-wrapper">
                            <i class="ri-layout-line"></i>
                        </div>
                        <h4>编排系统</h4>
                        <p>版面编排与设计管理</p>
                    </div>
                    <div class="sub-system-card orange">
                        <div class="card-badge-blue"></div>
                        <div class="icon-wrapper">
                            <i class="ri-table-line"></i>
                        </div>
                        <h4>智能表格</h4>
                        <p>数据统计与可视化分析</p>
                    </div>
                    <div class="sub-system-card orange">
                        <div class="card-badge-blue"></div>
                        <div class="icon-wrapper">
                            <i class="ri-price-tag-2-fill"></i> 
                        </div>
                        <h4><a onclick="window.open('http://inm.ccpititc.com/user', '_blank');
                    return false;">花名册</a></h4>
                        <p>员工信息与档案管理</p>
                    </div>
                </div>

                <h2 class="section-title ">
                    <i class="ri-rocket-line"></i>
                    快捷入口
                </h2>
                <div class="quick-links">
                    <div class="links-grid">
                        <a href="#" class="quick-link-item "
                        style="background-color:rgba(216, 216, 216, 0.2);
                        border: 1px solid #d9d9d9;"
                        >
                            <i class="ri-check-line"></i>
                            稿件审核
                        </a>
                        <a href="#" class="quick-link-item "
                       style="background-color:rgba(216, 216, 216, 0.2);
                        border: 1px solid #d9d9d9;"
                        >
                            <i class="ri-layout-line"></i>
                            版面管理
                        </a>
                        <a href="#" class="quick-link-item "
                       style="background-color:rgba(216, 216, 216, 0.2);
                        border: 1px solid #d9d9d9;"
                        >
                            <i class="ri-calendar-check-line"></i>
                            考勤系统
                        </a>
                        <a href="#" class="quick-link-item "
                 style="background-color:rgba(216, 216, 216, 0.2);
                        border: 1px solid #d9d9d9;"
                        >
                            <i class="ri-money-dollar-circle-line"></i>
                            工资查询
                        </a>
                        <a href="#" class="quick-link-item "
                    style="background-color:rgba(216, 216, 216, 0.2);
                        border: 1px solid #d9d9d9;"
                        >
                            <i class="ri-building-line"></i>
                            会议室预约
                        </a>
                        <a href="#" class="quick-link-item "
                  style="background-color:rgba(216, 216, 216, 0.2);
                        border: 1px solid #d9d9d9;"
                        >
                            <i class="ri-book-open-line"></i>
                            培训中心
                        </a>
                        <a href="#" class="quick-link-item "
   style="background-color:rgba(216, 216, 216, 0.2);
                        border: 1px solid #d9d9d9;"
                        >
                            <i class="ri-folder-line"></i>
                            资料库
                        </a>
                        <a href="#" class="quick-link-item " 
                       style="background-color:rgba(216, 216, 216, 0.2);
                        border: 1px solid #d9d9d9;"
                        >
                            <i  style="color: black;" class="ri-contacts-line"></i>
                            通讯录
                        </a>
                    </div>
                </div>

                <h2 class="section-title">
                    <i class="ri-bar-chart-line"></i>
                    数据统计
                </h2>
                <div class="main-systems">
                    <div class="system-card green">
                        <div class="icon-wrapper">
                            <i class="ri-line-chart-line"></i>
                        </div>
                        <h3>访问统计</h3>
                        <p>实时监控网站访问数据，分析用户行为与趋势</p>
                    </div>
                    <div class="system-card green">
                        <div class="icon-wrapper">
                            <i class="ri-pie-chart-line"></i>
                        </div>
                        <h3>内容分析</h3>
                        <p>深度分析内容表现，优化内容策略与发布</p>
                    </div>
                    <div class="system-card green">
                        <div class="icon-wrapper">
                            <i class="ri-user-line"></i>
                        </div>
                        <h3>用户画像</h3>
                        <p>构建用户画像，精准定位目标受众群体</p>
                    </div>
                </div>
            </div>

            <div id="roster" class="content-section">
                <h2 class="section-title">
                    <i class="ri-price-tag-2-fill"></i>
                    花名册
                </h2>
                <div class="content-container">
                    <!-- 花名册统计卡片 -->
                    <div class="roster-stats">
                        <div class="stat-card">
                            <div class="stat-icon"><i class="ri-team-line"></i></div>
                            <div class="stat-info">
                                <div class="stat-value">186</div>
                                <div class="stat-label">员工总数</div>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon"><i class="ri-user-add-line"></i></div>
                            <div class="stat-info">
                                <div class="stat-value">12</div>
                                <div class="stat-label">本月新增</div>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon"><i class="ri-user-star-line"></i></div>
                            <div class="stat-info">
                                <div class="stat-value">45</div>
                                <div class="stat-label">管理层人数</div>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon"><i class="ri-building-line"></i></div>
                            <div class="stat-info">
                                <div class="stat-value">8</div>
                                <div class="stat-label">部门数量</div>
                            </div>
                        </div>
                    </div>

                    <!-- 花名册搜索和过滤 -->
                    <div class="roster-filter">
                        <div class="search-container">
                            <input type="text" placeholder="搜索员工姓名、部门或职位..." class="roster-search">
                            <button class="roster-search-btn"><i class="ri-search-line"></i></button>
                        </div>
                        <div class="filter-options">
                            <select class="filter-select">
                                <option value="">所有部门</option>
                                <option value="编辑部">编辑部</option>
                                <option value="市场部">市场部</option>
                                <option value="行政部">行政部</option>
                                <option value="财务部">财务部</option>
                                <option value="技术部">技术部</option>
                                <option value="法务部">法务部</option>
                                <option value="展览部">展览部</option>
                                <option value="人力资源部">人力资源部</option>
                            </select>
                            <select class="filter-select">
                                <option value="">所有职位</option>
                                <option value="总编">总编</option>
                                <option value="主编">主编</option>
                                <option value="记者">记者</option>
                                <option value="经理">经理</option>
                                <option value="主管">主管</option>
                                <option value="专员">专员</option>
                                <option value="助理">助理</option>
                            </select>
                            <select class="filter-select">
                                <option value="">所有状态</option>
                                <option value="在职">在职</option>
                                <option value="请假">请假</option>
                                <option value="出差">出差</option>
                                <option value="离职">离职</option>
                            </select>
                            <button class="filter-btn red">筛选</button>
                            <button class="filter-reset-btn">重置</button>
                        </div>
                    </div>

                    <!-- 花名册数据表格 -->
                    <div class="roster-table-container">
                        <table class="roster-table">
                            <thead>
                                <tr>
                                    <th>工号</th>
                                    <th>姓名</th>
                                    <th>部门</th>
                                    <th>职位</th>
                                    <th>入职日期</th>
                                    <th>联系电话</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>20220001</td>
                                    <td class="employee-name">
                                        <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="员工头像" class="employee-avatar">
                                        <span>张明</span>
                                    </td>
                                    <td>编辑部</td>
                                    <td>总编</td>
                                    <td>2018-05-16</td>
                                    <td>13812345678</td>
                                    <td><span class="status-badge active">在职</span></td>
                                    <td class="action-buttons">
                                        <button class="action-btn view"><i class="ri-eye-line"></i></button>
                                        <button class="action-btn edit"><i class="ri-edit-line"></i></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>20220015</td>
                                    <td class="employee-name">
                                        <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="员工头像" class="employee-avatar">
                                        <span>李琳</span>
                                    </td>
                                    <td>市场部</td>
                                    <td>经理</td>
                                    <td>2019-03-21</td>
                                    <td>13987654321</td>
                                    <td><span class="status-badge active">在职</span></td>
                                    <td class="action-buttons">
                                        <button class="action-btn view"><i class="ri-eye-line"></i></button>
                                        <button class="action-btn edit"><i class="ri-edit-line"></i></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>20220023</td>
                                    <td class="employee-name">
                                        <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="员工头像" class="employee-avatar">
                                         <span>王强</span>
                                    </td>
                                    <td>技术部</td>
                                    <td>主管</td>
                                    <td>2020-01-08</td>
                                    <td>13765432198</td>
                                    <td><span class="status-badge leave">请假</span></td>
                                    <td class="action-buttons">
                                        <button class="action-btn view"><i class="ri-eye-line"></i></button>
                                        <button class="action-btn edit"><i class="ri-edit-line"></i></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>20220038</td>
                                    <td class="employee-name">
                                        <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="员工头像" class="employee-avatar">
                                       <span>赵敏</span>
                                    </td>
                                    <td>编辑部</td>
                                    <td>记者</td>
                                    <td>2021-06-15</td>
                                    <td>13609876543</td>
                                    <td><span class="status-badge travel">出差</span></td>
                                    <td class="action-buttons">
                                        <button class="action-btn view"><i class="ri-eye-line"></i></button>
                                        <button class="action-btn edit"><i class="ri-edit-line"></i></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>20220042</td>
                                    <td class="employee-name">
                                        <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="员工头像" class="employee-avatar">
                                        <span>陈伟</span>
                                    </td>
                                    <td>行政部</td>
                                    <td>主管</td>
                                    <td>2020-09-12</td>
                                    <td>13512345678</td>
                                    <td><span class="status-badge active">在职</span></td>
                                    <td class="action-buttons">
                                        <button class="action-btn view"><i class="ri-eye-line"></i></button>
                                        <button class="action-btn edit"><i class="ri-edit-line"></i></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>20220056</td>
                                    <td class="employee-name">
                                        <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="员工头像" class="employee-avatar">
                                        <span>黄婷</span>
                                    </td>
                                    <td>财务部</td>
                                    <td>经理</td>
                                    <td>2018-11-03</td>
                                    <td>13387654321</td>
                                    <td><span class="status-badge active">在职</span></td>
                                    <td class="action-buttons">
                                        <button class="action-btn view"><i class="ri-eye-line"></i></button>
                                        <button class="action-btn edit"><i class="ri-edit-line"></i></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>20220061</td>
                                    <td class="employee-name">
                                        <img src="https://randomuser.me/api/portraits/men/41.jpg" alt="员工头像" class="employee-avatar">
                                        <span>吴杰</span>
                                    </td>
                                    <td>展览部</td>
                                    <td>专员</td>
                                    <td>2022-02-18</td>
                                    <td>13598765432</td>
                                    <td><span class="status-badge inactive">离职</span></td>
                                    <td class="action-buttons">
                                        <button class="action-btn view"><i class="ri-eye-line"></i></button>
                                        <button class="action-btn edit"><i class="ri-edit-line"></i></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>20220078</td>
                                    <td class="employee-name">
                                        <img src="https://randomuser.me/api/portraits/women/64.jpg" alt="员工头像" class="employee-avatar">
                                        <span>刘芳</span>
                                    </td>
                                    <td>人力资源部</td>
                                    <td>主管</td>
                                    <td>2021-04-25</td>
                                    <td>13612378945</td>
                                    <td><span class="status-badge active">在职</span></td>
                                    <td class="action-buttons">
                                        <button class="action-btn view"><i class="ri-eye-line"></i></button>
                                        <button class="action-btn edit"><i class="ri-edit-line"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页控制 -->
                    <div class="pagination">
                        <button class="page-btn"><i class="ri-arrow-left-s-line"></i></button>
                        <button class="page-btn active">1</button>
                        <button class="page-btn">2</button>
                        <button class="page-btn">3</button>
                        <span class="page-ellipsis">...</span>
                        <button class="page-btn">20</button>
                        <button class="page-btn"><i class="ri-arrow-right-s-line"></i></button>
                    </div>
                </div>
            </div>

            <div id="salary-calc" class="content-section">
                <h2 class="section-title">
                    <i class="ri-calculator-line"></i>
                    薪资测算
                </h2>
                <div class="content-container">
                    <!-- 薪资测算页面顶部统计卡片 -->
                    <div class="salary-calc-stats">
                        <div class="salary-stat-card">
                            <div class="stat-value">￥8,652</div>
                            <div class="stat-label">平均基本工资</div>
                        </div>
                        <div class="salary-stat-card">
                            <div class="stat-value">￥2,453</div>
                            <div class="stat-label">平均绩效奖金</div>
                        </div>
                        <div class="salary-stat-card">
                            <div class="stat-value">￥1,250</div>
                            <div class="stat-label">平均补贴金额</div>
                        </div>
                        <div class="salary-stat-card">
                            <div class="stat-value">￥2,345</div>
                            <div class="stat-label">平均扣除金额</div>
                        </div>
                    </div>
                    
                    <!-- 薪资测算表单和结果展示 -->
                    <div class="salary-calc-container">
                        <div class="salary-calc-form">
                            <div class="form-header">
                                <h3>薪资计算器</h3>
                                <p>输入各项数据，计算税后实际工资</p>
                            </div>
                            
                            <!-- 基本信息 -->
                            <div class="form-section">
                                <h4 class="section-label">基本信息</h4>
                                <div class="form-row">
                                    <div class="form-group">
                                        <label>员工姓名</label>
                                        <input type="text" class="form-control" placeholder="请输入姓名">
                                    </div>
                                    <div class="form-group">
                                        <label>所属部门</label>
                                        <select class="form-control">
                                            <option value="">请选择部门</option>
                                            <option value="编辑部">编辑部</option>
                                            <option value="市场部">市场部</option>
                                            <option value="行政部">行政部</option>
                                            <option value="财务部">财务部</option>
                                            <option value="技术部">技术部</option>
                                            <option value="法务部">法务部</option>
                                            <option value="展览部">展览部</option>
                                            <option value="人力资源部">人力资源部</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group">
                                        <label>职位</label>
                                        <select class="form-control">
                                            <option value="">请选择职位</option>
                                            <option value="总编">总编</option>
                                            <option value="主编">主编</option>
                                            <option value="记者">记者</option>
                                            <option value="经理">经理</option>
                                            <option value="主管">主管</option>
                                            <option value="专员">专员</option>
                                            <option value="助理">助理</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>工龄（年）</label>
                                        <input type="number" class="form-control" min="0" max="50" placeholder="请输入工龄">
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 收入部分 -->
                            <div class="form-section">
                                <h4 class="section-label">收入部分</h4>
                                <div class="form-row">
                                    <div class="form-group">
                                        <label>基本工资（元）</label>
                                        <input type="number" class="form-control" min="0" placeholder="请输入基本工资" value="8000">
                                    </div>
                                    <div class="form-group">
                                        <label>绩效奖金（元）</label>
                                        <input type="number" class="form-control" min="0" placeholder="请输入绩效奖金" value="2500">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group">
                                        <label>岗位津贴（元）</label>
                                        <input type="number" class="form-control" min="0" placeholder="请输入岗位津贴" value="800">
                                    </div>
                                    <div class="form-group">
                                        <label>交通补贴（元）</label>
                                        <input type="number" class="form-control" min="0" placeholder="请输入交通补贴" value="300">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group">
                                        <label>餐饮补贴（元）</label>
                                        <input type="number" class="form-control" min="0" placeholder="请输入餐饮补贴" value="400">
                                    </div>
                                    <div class="form-group">
                                        <label>其他补贴（元）</label>
                                        <input type="number" class="form-control" min="0" placeholder="请输入其他补贴" value="0">
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 扣除部分 -->
                            <div class="form-section">
                                <h4 class="section-label">扣除部分</h4>
                                <div class="form-row">
                                    <div class="form-group">
                                        <label>个人所得税（元）</label>
                                        <input type="number" class="form-control" min="0" placeholder="自动计算" readonly value="680">
                                    </div>
                                    <div class="form-group">
                                        <label>社保个人部分（元）</label>
                                        <input type="number" class="form-control" min="0" placeholder="自动计算" readonly value="1200">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group">
                                        <label>公积金个人部分（元）</label>
                                        <input type="number" class="form-control" min="0" placeholder="自动计算" readonly value="800">
                                    </div>
                                    <div class="form-group">
                                        <label>其他扣除（元）</label>
                                        <input type="number" class="form-control" min="0" placeholder="请输入其他扣除" value="0">
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 计算按钮 -->
                            <div class="form-actions">
                                <button class="btn-calculate">计算薪资</button>
                                <button class="btn-reset">重置</button>
                            </div>
                        </div>
                        
                        <!-- 计算结果 -->
                        <div class="salary-calc-result">
                            <div class="result-header">
                                <h3>计算结果</h3>
                                <div class="result-date">计算日期：2023-06-15</div>
                            </div>
                            
                            <div class="result-summary">
                                <div class="total-salary">
                                    <div class="total-label">税后实发工资</div>
                                    <div class="total-value">￥9,320</div>
                                </div>
                                
                                <div class="salary-details">
                                    <div class="detail-item">
                                        <div class="detail-label">总收入</div>
                                        <div class="detail-value">￥12,000</div>
                                    </div>
                                    <div class="detail-item">
                                        <div class="detail-label">总扣除</div>
                                        <div class="detail-value">￥2,680</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="salary-chart">
                                <div class="chart-title">薪资构成</div>
                                <div class="chart-container">
                                    <div class="chart-item" style="width: 66.7%;">
                                        <div class="chart-bar basic"></div>
                                        <div class="chart-label">基本工资 66.7%</div>
                                    </div>
                                    <div class="chart-item" style="width: 20.8%;">
                                        <div class="chart-bar performance"></div>
                                        <div class="chart-label">绩效奖金 20.8%</div>
                                    </div>
                                    <div class="chart-item" style="width: 12.5%;">
                                        <div class="chart-bar allowance"></div>
                                        <div class="chart-label">补贴 12.5%</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="action-buttons">
                                <button class="btn-export"><i class="ri-download-line"></i> 导出报表</button>
                                <button class="btn-print"><i class="ri-printer-line"></i> 打印结果</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="my-salary" class="content-section">
                <h2 class="section-title">
                    <i class="ri-money-dollar-circle-line"></i>
                    我的工资
                </h2>
                <div class="content-container">
                    <!-- 薪资概览卡片 -->
                    <div class="salary-overview">
                        <div class="overview-card primary">
                            <div class="card-icon"><i class="ri-wallet-3-line"></i></div>
                            <div class="card-info">
                                <div class="info-label">本月实发工资</div>
                                <div class="info-value">￥12,580</div>
                                <div class="info-trend positive">
                                    <i class="ri-arrow-up-line"></i>
                                    较上月 +5.2%
                                </div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="card-icon"><i class="ri-trophy-line"></i></div>
                            <div class="card-info">
                                <div class="info-label">绩效奖金</div>
                                <div class="info-value">￥3,200</div>
                                <div class="info-trend positive">
                                    <i class="ri-arrow-up-line"></i>
                                    较上月 +12.5%
                                </div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="card-icon"><i class="ri-bank-card-line"></i></div>
                            <div class="card-info">
                                <div class="info-label">基本工资</div>
                                <div class="info-value">￥8,500</div>
                                <div class="info-trend neutral">
                                    <i class="ri-subtract-line"></i>
                                    较上月 +0%
                                </div>
                            </div>
                        </div>
                        <div class="overview-card">
                            <div class="card-icon"><i class="ri-funds-line"></i></div>
                            <div class="card-info">
                                <div class="info-label">年度累计</div>
                                <div class="info-value">￥138,960</div>
                                <div class="info-trend positive">
                                    <i class="ri-arrow-up-line"></i>
                                    同比 +8.3%
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 薪资历史记录 -->
                    <div class="salary-history">
                        <div class="section-header">
                            <h3>薪资历史记录</h3>
                            <div class="header-actions">
                                <select class="year-select">
                                    <option value="2024">2024年</option>
                                    <option value="2023">2023年</option>
                                    <option value="2022">2022年</option>
                                </select>
                                <button class="export-btn">
                                    <i class="ri-download-line"></i>
                                    导出记录
                                </button>
                            </div>
                        </div>
                        <div class="history-table">
                            <table>
                                <thead>
                                    <tr>
                                        <th>月份</th>
                                        <th>基本工资</th>
                                        <th>绩效奖金</th>
                                        <th>补贴</th>
                                        <th>扣除</th>
                                        <th>实发工资</th>
                                        <th>发放状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>2024-02</td>
                                        <td>￥8,500</td>
                                        <td>￥3,200</td>
                                        <td>￥1,500</td>
                                        <td>-￥620</td>
                                        <td class="highlight">￥12,580</td>
                                        <td><span class="status success">已发放</span></td>
                                        <td><button class="detail-btn">查看明细</button></td>
                                    </tr>
                                    <tr>
                                        <td>2024-01</td>
                                        <td>￥8,500</td>
                                        <td>￥2,800</td>
                                        <td>￥1,500</td>
                                        <td>-￥580</td>
                                        <td class="highlight">￥12,220</td>
                                        <td><span class="status success">已发放</span></td>
                                        <td><button class="detail-btn">查看明细</button></td>
                                    </tr>
                                    <tr>
                                        <td>2023-12</td>
                                        <td>￥8,500</td>
                                        <td>￥4,500</td>
                                        <td>￥2,000</td>
                                        <td>-￥750</td>
                                        <td class="highlight">￥14,250</td>
                                        <td><span class="status success">已发放</span></td>
                                        <td><button class="detail-btn">查看明细</button></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 薪资分析图表 -->
                    <div class="salary-analysis">
                        <div class="analysis-charts">
                            <div class="chart-card">
                                <h4>薪资构成</h4>
                                <div class="pie-chart-placeholder">
                                    <!-- 这里放饼图 -->
                                    <div class="chart-legend">
                                        <div class="legend-item">
                                            <span class="color-dot basic"></span>
                                            基本工资 (67.5%)
                                        </div>
                                        <div class="legend-item">
                                            <span class="color-dot performance"></span>
                                            绩效奖金 (25.4%)
                                        </div>
                                        <div class="legend-item">
                                            <span class="color-dot allowance"></span>
                                            补贴 (11.9%)
                                        </div>
                                        <div class="legend-item">
                                            <span class="color-dot deduction"></span>
                                            扣除 (-4.8%)
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="chart-card">
                                <h4>月度工资趋势</h4>
                                <div class="line-chart-placeholder">
                                    <!-- 这里放折线图 -->
                                    <div class="chart-legend">
                                        <div class="trend-point">
                                            <span class="point-label">最高值</span>
                                            <span class="point-value">￥14,250</span>
                                            <span class="point-date">2023-12</span>
                                        </div>
                                        <div class="trend-point">
                                            <span class="point-label">最低值</span>
                                            <span class="point-value">￥11,800</span>
                                            <span class="point-date">2023-08</span>
                                        </div>
                                        <div class="trend-point">
                                            <span class="point-label">平均值</span>
                                            <span class="point-value">￥12,580</span>
                                            <span class="point-date">近6个月</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="performance" class="content-section">
                <h2 class="section-title">
                    <i class="ri-medal-line"></i>
                    绩效管理
                </h2>
                <div class="content-container">
                    <!-- 绩效概览 -->
                    <div class="performance-overview">
                        <div class="performance-card excellent">
                            <div class="performance-score">92</div>
                            <div class="performance-label">本月绩效得分</div>
                            <div class="performance-trend up">
                                <i class="ri-arrow-up-line"></i>
                                较上月 +3分
                            </div>
                        </div>
                        <div class="performance-card good">
                            <div class="performance-score">88</div>
                            <div class="performance-label">季度平均分</div>
                            <div class="performance-trend up">
                                <i class="ri-arrow-up-line"></i>
                                环比 +2.5分
                            </div>
                        </div>
                        <div class="performance-card average">
                            <div class="performance-score">85</div>
                            <div class="performance-label">年度平均分</div>
                            <div class="performance-trend flat">
                                <i class="ri-subtract-line"></i>
                                同比 +0.8分
                            </div>
                        </div>
                        <div class="performance-card">
                            <div class="performance-score">15</div>
                            <div class="performance-label">绩效考核次数</div>
                            <div class="performance-trend up">
                                <i class="ri-arrow-up-line"></i>
                                已完成 15/16
                            </div>
                        </div>
                    </div>

                    <!-- 考核记录表格 -->
                    <div class="assessment-table">
                        <div class="section-header">
                            <h3>考核记录</h3>
                            <div class="header-actions">
                                <select class="year-select">
                                    <option value="2024">2024年</option>
                                    <option value="2023">2023年</option>
                                </select>
                                <button class="export-btn">
                                    <i class="ri-download-line"></i>
                                    导出记录
                                </button>
                            </div>
                        </div>
                        <table>
                            <thead>
                                <tr>
                                    <th>考核周期</th>
                                    <th>考核项目</th>
                                    <th>得分</th>
                                    <th>等级</th>
                                    <th>考核人</th>
                                    <th>考核时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>2024年2月</td>
                                    <td>月度工作绩效</td>
                                    <td>92</td>
                                    <td><span class="score-badge excellent">优秀</span></td>
                                    <td>张明</td>
                                    <td>2024-02-28</td>
                                    <td><button class="detail-btn">查看详情</button></td>
                                </tr>
                                <tr>
                                    <td>2024年1月</td>
                                    <td>月度工作绩效</td>
                                    <td>89</td>
                                    <td><span class="score-badge good">良好</span></td>
                                    <td>张明</td>
                                    <td>2024-01-31</td>
                                    <td><button class="detail-btn">查看详情</button></td>
                                </tr>
                                <tr>
                                    <td>2023年第四季度</td>
                                    <td>季度综合评估</td>
                                    <td>90</td>
                                    <td><span class="score-badge excellent">优秀</span></td>
                                    <td>李琳</td>
                                    <td>2023-12-31</td>
                                    <td><button class="detail-btn">查看详情</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 主管反馈 -->
                    <div class="feedback-card">
                        <div class="feedback-header">
                            <h3 class="feedback-title">最新主管反馈</h3>
                            <div class="feedback-date">2024-02-28</div>
                        </div>
                        <div class="feedback-content">
                            本月工作表现突出，在项目管理和团队协作方面展现出色的领导力。特别是在新系统上线过程中，
                            能够有效协调各方资源，确保项目按时交付。建议在后续工作中继续保持，并进一步加强创新思维的培养。
                        </div>
                        <div class="feedback-tags">
                            <span class="feedback-tag">项目管理</span>
                            <span class="feedback-tag">团队协作</span>
                            <span class="feedback-tag">领导力</span>
                            <span class="feedback-tag">创新思维</span>
                        </div>
                    </div>

                    <!-- 能力评估图表 -->
                    <div class="analysis-charts">
                        <div class="chart-card">
                            <h4>能力评估雷达图</h4>
                            <div class="pie-chart-placeholder">
                                <!-- 这里放雷达图 -->
                                <div class="chart-legend">
                                    <div class="legend-item">
                                        <span class="color-dot basic"></span>
                                        专业技能 (95)
                                    </div>
                                    <div class="legend-item">
                                        <span class="color-dot performance"></span>
                                        团队协作 (88)
                                    </div>
                                    <div class="legend-item">
                                        <span class="color-dot allowance"></span>
                                        创新能力 (82)
                                    </div>
                                    <div class="legend-item">
                                        <span class="color-dot deduction"></span>
                                        执行力 (90)
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="chart-card">
                            <h4>绩效趋势分析</h4>
                            <div class="line-chart-placeholder">
                                <!-- 这里放折线图 -->
                                <div class="chart-legend">
                                    <div class="trend-point">
                                        <span class="point-label">最高分</span>
                                        <span class="point-value">92分</span>
                                        <span class="point-date">2024-02</span>
                                    </div>
                                    <div class="trend-point">
                                        <span class="point-label">最低分</span>
                                        <span class="point-value">85分</span>
                                        <span class="point-date">2023-08</span>
                                    </div>
                                    <div class="trend-point">
                                        <span class="point-label">平均分</span>
                                        <span class="point-value">88分</span>
                                        <span class="point-date">近6个月</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="overseas" class="content-section">
                <h2 class="section-title">
                    <i class="ri-global-line"></i>
                    外展业务
                </h2>
                <div class="content-container">
                    <!-- 外展业务内容展示区域 -->
                    
                    <!-- 统计数据展示 -->
                    <div class="exhibition-stats">
                        <div class="exhibition-stat-card">
                            <div class="stat-value">286</div>
                            <div class="stat-label">进行中的展会</div>
                        </div>
                        <div class="exhibition-stat-card">
                            <div class="stat-value">1,458</div>
                            <div class="stat-label">累计展会数量</div>
                        </div>
                        <div class="exhibition-stat-card">
                            <div class="stat-value">89%</div>
                            <div class="stat-label">参展商满意度</div>
                        </div>
                        <div class="exhibition-stat-card">
                            <div class="stat-value">42</div>
                            <div class="stat-label">合作国家数量</div>
                        </div>
                    </div>

                    <!-- 筛选器和搜索 -->
                    <div class="exhibition-filters">
                        <div class="filter-group">
                            <span class="filter-label">展会地区</span>
                            <select class="filter-select">
                                <option value="">全部地区</option>
                                <option value="europe">欧洲</option>
                                <option value="asia">亚洲</option>
                                <option value="america">美洲</option>
                                <option value="oceania">大洋洲</option>
                                <option value="africa">非洲</option>
                            </select>
                        </div>
                        <div class="filter-group">
                            <span class="filter-label">展会类型</span>
                            <select class="filter-select">
                                <option value="">全部类型</option>
                                <option value="trade">贸易展览</option>
                                <option value="industry">工业展览</option>
                                <option value="tech">科技展览</option>
                                <option value="culture">文化展览</option>
                            </select>
                        </div>
                        <div class="filter-group">
                            <span class="filter-label">展会状态</span>
                            <select class="filter-select">
                                <option value="">全部状态</option>
                                <option value="upcoming">即将开始</option>
                                <option value="ongoing">进行中</option>
                                <option value="completed">已结束</option>
                            </select>
                        </div>
                        <div class="search-box">
                            <i class="ri-search-line search-icon"></i>
                            <input type="text" class="search-input" placeholder="搜索展会名称、地点或关键词">
                        </div>
                    </div>

                    <!-- 展会列表 -->
                    <div class="exhibition-grid">
                        <!-- 展会卡片1 -->
                        <div class="exhibition-card">
                            <div class="exhibition-image" style="background-image: url('https://via.placeholder.com/400x200')">
                                <span class="exhibition-status status-upcoming">即将开始</span>
                            </div>
                            <div class="exhibition-content">
                                <h3 class="exhibition-title">2024德国汉诺威工业博览会</h3>
                                <div class="exhibition-info">
                                    <div class="info-item">
                                        <i class="ri-map-pin-line"></i>
                                        德国汉诺威展览中心
                                    </div>
                                    <div class="info-item">
                                        <i class="ri-calendar-line"></i>
                                        2024-04-15 至 2024-04-19
                                    </div>
                                    <div class="info-item">
                                        <i class="ri-group-line"></i>
                                        预计参展商：6,500+
                                    </div>
                                </div>
                                <div class="exhibition-tags">
                                    <span class="exhibition-tag">工业4.0</span>
                                    <span class="exhibition-tag">自动化</span>
                                    <span class="exhibition-tag">数字化转型</span>
                                </div>
                                <div class="exhibition-actions">
                                    <button class="action-btn btn-primary">申请参展</button>
                                    <button class="action-btn btn-secondary">了解更多</button>
                                </div>
                            </div>
                        </div>

                        <!-- 展会卡片2 -->
                        <div class="exhibition-card">
                            <div class="exhibition-image" style="background-image: url('https://via.placeholder.com/400x200')">
                                <span class="exhibition-status status-ongoing">进行中</span>
                            </div>
                            <div class="exhibition-content">
                                <h3 class="exhibition-title">2024迪拜世界贸易展览会</h3>
                                <div class="exhibition-info">
                                    <div class="info-item">
                                        <i class="ri-map-pin-line"></i>
                                        阿联酋迪拜世界贸易中心
                                    </div>
                                    <div class="info-item">
                                        <i class="ri-calendar-line"></i>
                                        2024-03-10 至 2024-03-14
                                    </div>
                                    <div class="info-item">
                                        <i class="ri-group-line"></i>
                                        参展商：4,200+
                                    </div>
                                </div>
                                <div class="exhibition-tags">
                                    <span class="exhibition-tag">国际贸易</span>
                                    <span class="exhibition-tag">电子商务</span>
                                    <span class="exhibition-tag">零售科技</span>
                                </div>
                                <div class="exhibition-actions">
                                    <button class="action-btn btn-primary">在线参观</button>
                                    <button class="action-btn btn-secondary">展会详情</button>
                                </div>
                            </div>
                        </div>

                        <!-- 展会卡片3 -->
                        <div class="exhibition-card">
                            <div class="exhibition-image" style="background-image: url('https://via.placeholder.com/400x200')">
                                <span class="exhibition-status status-upcoming">即将开始</span>
                            </div>
                            <div class="exhibition-content">
                                <h3 class="exhibition-title">2024东京国际消费电子展</h3>
                                <div class="exhibition-info">
                                    <div class="info-item">
                                        <i class="ri-map-pin-line"></i>
                                        日本东京有明展览馆
                                    </div>
                                    <div class="info-item">
                                        <i class="ri-calendar-line"></i>
                                        2024-05-20 至 2024-05-24
                                    </div>
                                    <div class="info-item">
                                        <i class="ri-group-line"></i>
                                        预计参展商：3,800+
                                    </div>
                                </div>
                                <div class="exhibition-tags">
                                    <span class="exhibition-tag">消费电子</span>
                                    <span class="exhibition-tag">智能设备</span>
                                    <span class="exhibition-tag">创新科技</span>
                                </div>
                                <div class="exhibition-actions">
                                    <button class="action-btn btn-primary">预约参展</button>
                                    <button class="action-btn btn-secondary">展位图</button>
                                </div>
                            </div>
                        </div>

                        <!-- 展会卡片4 -->
                        <div class="exhibition-card">
                            <div class="exhibition-image" style="background-image: url('https://via.placeholder.com/400x200')">
                                <span class="exhibition-status status-completed">已结束</span>
                            </div>
                            <div class="exhibition-content">
                                <h3 class="exhibition-title">2024巴黎国际食品展览会</h3>
                                <div class="exhibition-info">
                                    <div class="info-item">
                                        <i class="ri-map-pin-line"></i>
                                        法国巴黎Nord Villepinte展览中心
                                    </div>
                                    <div class="info-item">
                                        <i class="ri-calendar-line"></i>
                                        2024-02-24 至 2024-02-28
                                    </div>
                                    <div class="info-item">
                                        <i class="ri-group-line"></i>
                                        参展商：7,200+
                                    </div>
                                </div>
                                <div class="exhibition-tags">
                                    <span class="exhibition-tag">食品饮料</span>
                                    <span class="exhibition-tag">餐饮设备</span>
                                    <span class="exhibition-tag">食品加工</span>
                                </div>
                                <div class="exhibition-actions">
                                    <button class="action-btn btn-primary">查看报告</button>
                                    <button class="action-btn btn-secondary">下次预约</button>
                                </div>
                            </div>
                        </div>

                        <!-- 展会卡片5 -->
                        <div class="exhibition-card">
                            <div class="exhibition-image" style="background-image: url('https://via.placeholder.com/400x200')">
                                <span class="exhibition-status status-upcoming">即将开始</span>
                            </div>
                            <div class="exhibition-content">
                                <h3 class="exhibition-title">2024米兰国际家具展</h3>
                                <div class="exhibition-info">
                                    <div class="info-item">
                                        <i class="ri-map-pin-line"></i>
                                        意大利米兰国际展览中心
                                    </div>
                                    <div class="info-item">
                                        <i class="ri-calendar-line"></i>
                                        2024-04-16 至 2024-04-21
                                    </div>
                                    <div class="info-item">
                                        <i class="ri-group-line"></i>
                                        预计参展商：2,300+
                                    </div>
                                </div>
                                <div class="exhibition-tags">
                                    <span class="exhibition-tag">家具设计</span>
                                    <span class="exhibition-tag">室内装饰</span>
                                    <span class="exhibition-tag">创意生活</span>
                                </div>
                                <div class="exhibition-actions">
                                    <button class="action-btn btn-primary">申请参展</button>
                                    <button class="action-btn btn-secondary">了解更多</button>
                                </div>
                            </div>
                        </div>

                        <!-- 展会卡片6 -->
                        <div class="exhibition-card">
                            <div class="exhibition-image" style="background-image: url('https://via.placeholder.com/400x200')">
                                <span class="exhibition-status status-upcoming">即将开始</span>
                            </div>
                            <div class="exhibition-content">
                                <h3 class="exhibition-title">2024新加坡医疗器械展</h3>
                                <div class="exhibition-info">
                                    <div class="info-item">
                                        <i class="ri-map-pin-line"></i>
                                        新加坡滨海湾金沙会展中心
                                    </div>
                                    <div class="info-item">
                                        <i class="ri-calendar-line"></i>
                                        2024-06-10 至 2024-06-12
                                    </div>
                                    <div class="info-item">
                                        <i class="ri-group-line"></i>
                                        预计参展商：1,500+
                                    </div>
                                </div>
                                <div class="exhibition-tags">
                                    <span class="exhibition-tag">医疗器械</span>
                                    <span class="exhibition-tag">生物科技</span>
                                    <span class="exhibition-tag">健康科技</span>
                                </div>
                                <div class="exhibition-actions">
                                    <button class="action-btn btn-primary">预约参展</button>
                                    <button class="action-btn btn-secondary">展位图</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 分页控制 -->
                    <div class="pagination" style="display: flex; justify-content: center; margin-top: 24px;">
                        <button style="padding: 8px 16px; border: 1px solid #d9d9d9; background: white; margin: 0 4px; border-radius: 4px;">上一页</button>
                        <button style="padding: 8px 16px; border: 1px solid #1a73e8; background: #1a73e8; color: white; margin: 0 4px; border-radius: 4px;">1</button>
                        <button style="padding: 8px 16px; border: 1px solid #d9d9d9; background: white; margin: 0 4px; border-radius: 4px;">2</button>
                        <button style="padding: 8px 16px; border: 1px solid #d9d9d9; background: white; margin: 0 4px; border-radius: 4px;">3</button>
                        <button style="padding: 8px 16px; border: 1px solid #d9d9d9; background: white; margin: 0 4px; border-radius: 4px;">下一页</button>
                    </div>
                </div>
            </div>
            
            <div id="gem" class="content-section">
                <h2 class="section-title">
                    <i class="ri-grid-line"></i>
                    全球展览信息矩阵 (Global Exhibition Matrix)
                </h2>
                <div class="content-container">
                    <!-- 全球展览信息矩阵 -->
                    
                    <!-- KPI指标卡片 -->
                    <div class="matrix-view">
                        <div class="matrix-card">
                            <div class="matrix-icon">
                                <i class="ri-global-line"></i>
                            </div>
                            <div class="matrix-title">活跃展会数量</div>
                            <div class="matrix-value">1,286</div>
                            <div class="matrix-trend">
                                <i class="ri-arrow-up-line"></i>
                                较上月 +5.2%
                            </div>
                        </div>
                        <div class="matrix-card">
                            <div class="matrix-icon">
                                <i class="ri-map-pin-line"></i>
                            </div>
                            <div class="matrix-title">覆盖国家</div>
                            <div class="matrix-value">86</div>
                            <div class="matrix-trend">
                                <i class="ri-arrow-up-line"></i>
                                新增 3 个
                            </div>
                        </div>
                        <div class="matrix-card">
                            <div class="matrix-icon">
                                <i class="ri-building-line"></i>
                            </div>
                            <div class="matrix-title">参展企业</div>
                            <div class="matrix-value">25,890</div>
                            <div class="matrix-trend">
                                <i class="ri-arrow-up-line"></i>
                                增长 12.3%
                            </div>
                        </div>
                        <div class="matrix-card">
                            <div class="matrix-icon">
                                <i class="ri-money-dollar-circle-line"></i>
                            </div>
                            <div class="matrix-title">交易额（亿）</div>
                            <div class="matrix-value">486</div>
                            <div class="matrix-trend">
                                <i class="ri-arrow-up-line"></i>
                                增长 8.7%
                            </div>
                        </div>
                    </div>
                    
                    <!-- 数据筛选区域 -->
                    <div class="exhibition-filters">
                        <div class="filter-group">
                            <span class="filter-label">时间范围</span>
                            <select class="filter-select">
                                <option value="month">本月</option>
                                <option value="quarter">本季度</option>
                                <option value="year" selected>本年度</option>
                                <option value="custom">自定义</option>
                            </select>
                        </div>
                        <div class="filter-group">
                            <span class="filter-label">区域筛选</span>
                            <select class="filter-select">
                                <option value="all" selected>全球</option>
                                <option value="asia">亚太地区</option>
                                <option value="europe">欧洲</option>
                                <option value="america">美洲</option>
                                <option value="africa">非洲</option>
                            </select>
                        </div>
                        <div class="filter-group">
                            <span class="filter-label">行业类型</span>
                            <select class="filter-select">
                                <option value="all" selected>全部行业</option>
                                <option value="manufacturing">制造业</option>
                                <option value="tech">科技</option>
                                <option value="consumer">消费品</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                        <div class="filter-group">
                            <button class="export-btn">
                                <i class="ri-download-line"></i>
                                导出报告
                            </button>
                        </div>
                    </div>
                    
                    <!-- 分析图表区域 -->
                    <div class="matrix-detail-grid">
                        <!-- 地区分布图表 -->
                        <div class="matrix-detail-card">
                            <h3 class="section-title">展会地区分布</h3>
                            <div style="height:200px; background:#f5f5f5; border-radius:8px; margin-bottom:16px; display:flex; justify-content:center; align-items:center; color:#999; font-size:14px;">
                                区域分布图表
                            </div>
                            <div class="matrix-data-list">
                                <div class="matrix-data-item">
                                    <span class="data-label">亚太地区</span>
                                    <span class="data-value">42%</span>
                                </div>
                                <div class="matrix-data-item">
                                    <span class="data-label">欧洲</span>
                                    <span class="data-value">28%</span>
                                </div>
                                <div class="matrix-data-item">
                                    <span class="data-label">北美</span>
                                    <span class="data-value">15%</span>
                                </div>
                                <div class="matrix-data-item">
                                    <span class="data-label">中东</span>
                                    <span class="data-value">8%</span>
                                </div>
                                <div class="matrix-data-item">
                                    <span class="data-label">其他</span>
                                    <span class="data-value">7%</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 展会规模趋势 -->
                        <div class="matrix-detail-card">
                            <h3 class="section-title">展会规模趋势</h3>
                            <div style="height:200px; background:#f5f5f5; border-radius:8px; margin-bottom:16px; display:flex; justify-content:center; align-items:center; color:#999; font-size:14px;">
                                展会规模趋势图表
                            </div>
                            <div class="matrix-data-list">
                                <div class="matrix-data-item">
                                    <span class="data-label">大型展会</span>
                                    <div class="trend-indicator trend-up">
                                        <i class="ri-arrow-up-line"></i>
                                        增长 15%
                                    </div>
                                </div>
                                <div class="matrix-data-item">
                                    <span class="data-label">中型展会</span>
                                    <div class="trend-indicator trend-up">
                                        <i class="ri-arrow-up-line"></i>
                                        增长 8%
                                    </div>
                                </div>
                                <div class="matrix-data-item">
                                    <span class="data-label">小型展会</span>
                                    <div class="trend-indicator trend-down">
                                        <i class="ri-arrow-down-line"></i>
                                        下降 3%
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 热门展会类别 -->
                    <div class="section-header">
                        <h3>热门展会类别 (2024年)</h3>
                        <div class="header-actions">
                            <select class="filter-select">
                                <option value="2024" selected>2024年</option>
                                <option value="2023">2023年</option>
                                <option value="2022">2022年</option>
                            </select>
                        </div>
                    </div>
                    
                    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px;">
                        <div style="background: white; border-radius: 8px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                            <div style="font-size: 32px; font-weight: 600; color: #1a73e8; margin-bottom: 8px;">158</div>
                            <div style="font-size: 14px; color: #666;">科技创新展</div>
                            <div style="height: 4px; background: #f0f0f0; border-radius: 2px; margin: 16px 0 8px;">
                                <div style="width: 85%; height: 100%; background: #1a73e8; border-radius: 2px;"></div>
                            </div>
                            <div style="font-size: 12px; color: #8c8c8c;">占比 18.5%</div>
                        </div>
                        <div style="background: white; border-radius: 8px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                            <div style="font-size: 32px; font-weight: 600; color: #1a73e8; margin-bottom: 8px;">142</div>
                            <div style="font-size: 14px; color: #666;">制造业展会</div>
                            <div style="height: 4px; background: #f0f0f0; border-radius: 2px; margin: 16px 0 8px;">
                                <div style="width: 76%; height: 100%; background: #1a73e8; border-radius: 2px;"></div>
                            </div>
                            <div style="font-size: 12px; color: #8c8c8c;">占比 16.7%</div>
                        </div>
                        <div style="background: white; border-radius: 8px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                            <div style="font-size: 32px; font-weight: 600; color: #1a73e8; margin-bottom: 8px;">121</div>
                            <div style="font-size: 14px; color: #666;">消费电子展</div>
                            <div style="height: 4px; background: #f0f0f0; border-radius: 2px; margin: 16px 0 8px;">
                                <div style="width: 65%; height: 100%; background: #1a73e8; border-radius: 2px;"></div>
                            </div>
                            <div style="font-size: 12px; color: #8c8c8c;">占比 14.2%</div>
                        </div>
                        <div style="background: white; border-radius: 8px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                            <div style="font-size: 32px; font-weight: 600; color: #1a73e8; margin-bottom: 8px;">98</div>
                            <div style="font-size: 14px; color: #666;">食品饮料展</div>
                            <div style="height: 4px; background: #f0f0f0; border-radius: 2px; margin: 16px 0 8px;">
                                <div style="width: 52%; height: 100%; background: #1a73e8; border-radius: 2px;"></div>
                            </div>
                            <div style="font-size: 12px; color: #8c8c8c;">占比 11.5%</div>
                        </div>
                    </div>
                    
                    <!-- 全球热力图展示 -->
                    <div class="section-header">
                        <h3>全球展会热力分布</h3>
                        <div class="header-actions">
                            <button class="export-btn">
                                <i class="ri-fullscreen-line"></i>
                                全屏查看
                            </button>
                        </div>
                    </div>
                    
                    <div style="height:400px; background:#f5f5f5; border-radius:12px; margin-bottom:24px; position:relative; display:flex; justify-content:center; align-items:center; color:#999; font-size:16px;">
                        世界地图热力图展示
                        <div style="position:absolute; bottom:16px; right:16px; background:rgba(255,255,255,0.9); padding:8px 16px; border-radius:8px; font-size:13px;">
                            <div style="display:flex; align-items:center; gap:8px; margin-bottom:4px;">
                                <span style="width:16px; height:8px; background:linear-gradient(to right, #52c41a, #faad14, #ff4d4f); display:inline-block;"></span>
                                <span>展会密度指数</span>
                            </div>
                            <div style="display:flex; justify-content:space-between; width:120px;">
                                <span>低</span>
                                <span>中</span>
                                <span>高</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 展会趋势预测 -->
                    <div class="section-header">
                        <h3>展会趋势预测</h3>
                        <div class="header-actions">
                            <button class="export-btn">
                                <i class="ri-file-chart-line"></i>
                                完整报告
                            </button>
                        </div>
                    </div>
                    
                    <div style="background:white; border-radius:12px; padding:24px; box-shadow:0 2px 12px rgba(0,0,0,0.05); margin-bottom:24px;">
                        <div style="display:flex; gap:24px; flex-wrap:wrap;">
                            <div style="flex:1; min-width:280px;">
                                <h4 style="font-size:16px; margin-bottom:16px;">未来12个月展会数量预测</h4>
                                <div style="height:200px; background:#f5f5f5; border-radius:8px; margin-bottom:16px; display:flex; justify-content:center; align-items:center; color:#999; font-size:14px;">
                                    展会数量预测图表
                                </div>
                                <div style="font-size:14px; color:#666; line-height:1.6;">
                                    根据AI分析，未来12个月全球展会数量将增长约<strong style="color:#1a73e8;">12.8%</strong>，
                                    其中亚太地区增速最快，预计达到<strong style="color:#1a73e8;">18.3%</strong>。
                                    科技创新类展会将继续保持领先地位。
                                </div>
                            </div>
                            <div style="flex:1; min-width:280px;">
                                <h4 style="font-size:16px; margin-bottom:16px;">新兴市场展会发展潜力</h4>
                                <div style="height:200px; background:#f5f5f5; border-radius:8px; margin-bottom:16px; display:flex; justify-content:center; align-items:center; color:#999; font-size:14px;">
                                    市场潜力分析图表
                                </div>
                                <div style="font-size:14px; color:#666; line-height:1.6;">
                                    东南亚、中东及非洲部分地区展现出强劲的展会增长潜力，
                                    预计2024-2025年间将新增约<strong style="color:#1a73e8;">320场</strong>专业展会，
                                    增速超过全球平均水平<strong style="color:#1a73e8;">8.5个百分点</strong>。
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 即将开始的重要展会 -->
                    <div class="section-header">
                        <h3>即将开始的重要展会</h3>
                        <div class="header-actions">
                            <button class="export-btn">
                                <i class="ri-calendar-line"></i>
                                日历视图
                            </button>
                        </div>
                    </div>
                    
                    <div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px; margin-bottom:24px;">
                        <!-- 展会卡片1 -->
                        <div style="background:white; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.08);">
                            <div style="height:140px; background:#1a73e8; position:relative; display:flex; justify-content:center; align-items:center; color:white; font-size:16px;">
                                展会图片展示
                                <div style="position:absolute; top:12px; right:12px; background:#52c41a; color:white; font-size:12px; padding:4px 10px; border-radius:12px;">
                                    2天后开始
                                </div>
                            </div>
                            <div style="padding:16px;">
                                <h4 style="margin:0 0 8px; font-size:16px; color:#262626;">2024年德国汉诺威工业博览会</h4>
                                <div style="display:flex; flex-direction:column; gap:8px; margin-bottom:12px;">
                                    <div style="display:flex; align-items:center; gap:8px; font-size:13px; color:#666;">
                                        <i class="ri-calendar-line" style="color:#1a73e8;"></i>
                                        2024-04-22 至 2024-04-26
                                    </div>
                                    <div style="display:flex; align-items:center; gap:8px; font-size:13px; color:#666;">
                                        <i class="ri-map-pin-line" style="color:#1a73e8;"></i>
                                        德国 · 汉诺威展览中心
                                    </div>
                                    <div style="display:flex; align-items:center; gap:8px; font-size:13px; color:#666;">
                                        <i class="ri-group-line" style="color:#1a73e8;"></i>
                                        预计参展企业：5,800+
                                    </div>
                                </div>
                                <div style="display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;">
                                    <span style="background:#f0f5ff; color:#1a73e8; font-size:12px; padding:2px 8px; border-radius:4px;">工业4.0</span>
                                    <span style="background:#f0f5ff; color:#1a73e8; font-size:12px; padding:2px 8px; border-radius:4px;">能源解决方案</span>
                                    <span style="background:#f0f5ff; color:#1a73e8; font-size:12px; padding:2px 8px; border-radius:4px;">自动化</span>
                                </div>
                                <div style="display:flex; gap:12px;">
                                    <button style="flex:1; padding:8px; background:#1a73e8; color:white; border:none; border-radius:6px; font-size:14px; cursor:pointer;">查看详情</button>
                                    <button style="flex:1; padding:8px; background:white; color:#1a73e8; border:1px solid #1a73e8; border-radius:6px; font-size:14px; cursor:pointer;">报名参展</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 展会卡片2 -->
                        <div style="background:white; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.08);">
                            <div style="height:140px; background:#00a389; position:relative; display:flex; justify-content:center; align-items:center; color:white; font-size:16px;">
                                展会图片展示
                                <div style="position:absolute; top:12px; right:12px; background:#faad14; color:white; font-size:12px; padding:4px 10px; border-radius:12px;">
                                    7天后开始
                                </div>
                            </div>
                            <div style="padding:16px;">
                                <h4 style="margin:0 0 8px; font-size:16px; color:#262626;">2024年迪拜国际医疗器械展览会</h4>
                                <div style="display:flex; flex-direction:column; gap:8px; margin-bottom:12px;">
                                    <div style="display:flex; align-items:center; gap:8px; font-size:13px; color:#666;">
                                        <i class="ri-calendar-line" style="color:#00a389;"></i>
                                        2024-05-01 至 2024-05-04
                                    </div>
                                    <div style="display:flex; align-items:center; gap:8px; font-size:13px; color:#666;">
                                        <i class="ri-map-pin-line" style="color:#00a389;"></i>
                                        阿联酋 · 迪拜世界贸易中心
                                    </div>
                                    <div style="display:flex; align-items:center; gap:8px; font-size:13px; color:#666;">
                                        <i class="ri-group-line" style="color:#00a389;"></i>
                                        预计参展企业：4,200+
                                    </div>
                                </div>
                                <div style="display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;">
                                    <span style="background:#e6fffb; color:#00a389; font-size:12px; padding:2px 8px; border-radius:4px;">医疗器械</span>
                                    <span style="background:#e6fffb; color:#00a389; font-size:12px; padding:2px 8px; border-radius:4px;">健康科技</span>
                                    <span style="background:#e6fffb; color:#00a389; font-size:12px; padding:2px 8px; border-radius:4px;">生物医学</span>
                                </div>
                                <div style="display:flex; gap:12px;">
                                    <button style="flex:1; padding:8px; background:#00a389; color:white; border:none; border-radius:6px; font-size:14px; cursor:pointer;">查看详情</button>
                                    <button style="flex:1; padding:8px; background:white; color:#00a389; border:1px solid #00a389; border-radius:6px; font-size:14px; cursor:pointer;">报名参展</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 展会卡片3 -->
                        <div style="background:white; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.08);">
                            <div style="height:140px; background:#7627c4; position:relative; display:flex; justify-content:center; align-items:center; color:white; font-size:16px;">
                                展会图片展示
                                <div style="position:absolute; top:12px; right:12px; background:#ff6b00; color:white; font-size:12px; padding:4px 10px; border-radius:12px;">
                                    15天后开始
                                </div>
                            </div>
                            <div style="padding:16px;">
                                <h4 style="margin:0 0 8px; font-size:16px; color:#262626;">2024年上海国际消费电子展</h4>
                                <div style="display:flex; flex-direction:column; gap:8px; margin-bottom:12px;">
                                    <div style="display:flex; align-items:center; gap:8px; font-size:13px; color:#666;">
                                        <i class="ri-calendar-line" style="color:#7627c4;"></i>
                                        2024-05-15 至 2024-05-18
                                    </div>
                                    <div style="display:flex; align-items:center; gap:8px; font-size:13px; color:#666;">
                                        <i class="ri-map-pin-line" style="color:#7627c4;"></i>
                                        中国 · 上海新国际博览中心
                                    </div>
                                    <div style="display:flex; align-items:center; gap:8px; font-size:13px; color:#666;">
                                        <i class="ri-group-line" style="color:#7627c4;"></i>
                                        预计参展企业：3,500+
                                    </div>
                                </div>
                                <div style="display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;">
                                    <span style="background:#f9f0ff; color:#7627c4; font-size:12px; padding:2px 8px; border-radius:4px;">消费电子</span>
                                    <span style="background:#f9f0ff; color:#7627c4; font-size:12px; padding:2px 8px; border-radius:4px;">智能家居</span>
                                    <span style="background:#f9f0ff; color:#7627c4; font-size:12px; padding:2px 8px; border-radius:4px;">人工智能</span>
                                </div>
                                <div style="display:flex; gap:12px;">
                                    <button style="flex:1; padding:8px; background:#7627c4; color:white; border:none; border-radius:6px; font-size:14px; cursor:pointer;">查看详情</button>
                                    <button style="flex:1; padding:8px; background:white; color:#7627c4; border:1px solid #7627c4; border-radius:6px; font-size:14px; cursor:pointer;">报名参展</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="ccpit" class="content-section">
                <h2 class="section-title">
                    <i class="ri-building-2-line"></i>
                    中展博
                </h2>
                <div class="content-container">
                    中展博的内容展示区域
                </div>
            </div>
            
            <div id="name-search" class="content-section">
                <h2 class="section-title">
                    <i class="ri-search-line"></i>
                    法律查名
                </h2>
                <div class="content-container">
                    法律查名的内容展示区域
                </div>
            </div>
            
            <div id="regulations" class="content-section">
                <h2 class="section-title">
                    <i class="ri-book-line"></i>
                    国外法律法规
                </h2>
                <div class="content-container">
                    国外法律法规的内容展示区域
                </div>
            </div>
            
            <div id="editor" class="content-section">
                <h2 class="section-title">
                    <i class="ri-article-line"></i>
                    采编系统
                </h2>
                <div class="content-container">
                    采编系统的内容展示区域
                </div>
            </div>
            
            <div id="materials" class="content-section">
                <h2 class="section-title">
                    <i class="ri-folder-line"></i>
                    采编素材库
                </h2>
                <div class="content-container">
                    采编素材库的内容展示区域
                </div>
            </div>
            
            <div id="sites" class="content-section">
                <h2 class="section-title">
                    <i class="ri-layout-line"></i>
                    站点管理
                </h2>
                <div class="content-container">
                    站点管理的内容展示区域
                </div>
            </div>
            
            <div id="articles" class="content-section">
                <h2 class="section-title">
                    <i class="ri-article-line"></i>
                    文章
                </h2>
                <div class="content-container">
                    文章的内容展示区域
                </div>
            </div>
            
            <div id="categories" class="content-section">
                <h2 class="section-title">
                    <i class="ri-menu-line"></i>
                    栏目
                </h2>
                <div class="content-container">
                    栏目的内容展示区域
                </div>
            </div>
            
            <div id="reports" class="content-section">
                <h2 class="section-title">
                    <i class="ri-bar-chart-line"></i>
                    业务报表
                </h2>
                <div class="content-container">
                    业务报表的内容展示区域
                </div>
            </div>
            
            <div id="ai-service" class="content-section">
                <h2 class="section-title">
                    <i class="ri-robot-line"></i>
                    智能客服
                </h2>
                <div class="content-container">
                    智能客服的内容展示区域
                </div>
            </div>
            
            <div id="docs" class="content-section">
                <h2 class="section-title">
                    <i class="ri-book-open-line"></i>
                    帮助文档
                </h2>
                <div class="content-container">
                    帮助文档的内容展示区域
                </div>
            </div>
            
            <div id="changelog" class="content-section">
                <h2 class="section-title">
                    <i class="ri-history-line"></i>
                    更新日志
                </h2>
                <div class="content-container">
                    更新日志的内容展示区域
                </div>
            </div>
            
            <div id="index-tools" class="content-section">
                <h2 class="section-title">
                    <i class="ri-list-check"></i>
                    索引编排
                </h2>
                <div class="content-container">
                    索引编排的内容展示区域
                </div>
            </div>
            
            <div id="image-search" class="content-section">
                <h2 class="section-title">
                    <i class="ri-image-line"></i>
                    图片查询
                </h2>
                <div class="content-container">
                    图片查询的内容展示区域
                </div>
            </div>
            
            <div id="other-tools" class="content-section">
                <h2 class="section-title">
                    <i class="ri-more-line"></i>
                    其它工具
                </h2>
                <div class="content-container">
                    其它工具的内容展示区域
                </div>
            </div>
            
            <div id="settings" class="content-section">
                <h2 class="section-title">
                    <i class="ri-settings-line"></i>
                    系统设置
                </h2>
                <div class="content-container">
                    系统设置的内容展示区域
                </div>
            </div>
        </div>
    </div>

    <script>
        function showSection(sectionId) {
            document.querySelectorAll('.content-section').forEach(section => {
                section.classList.remove('active');
            });
            
            const targetSection = document.getElementById(sectionId);
            if (targetSection) {
                targetSection.classList.add('active');
            }
            
            window.location.hash = sectionId;
            
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
            
            const currentLink = document.querySelector(`a[href="#${sectionId}"]`);
            if (currentLink) {
                currentLink.classList.add('active');
            }
        }
        
        document.addEventListener('DOMContentLoaded', function() {
            let hash = window.location.hash.substring(1);
            
            if (!hash || !document.getElementById(hash)) {
                hash = 'dashboard';
            }
            
            showSection(hash);
        });
        
        window.addEventListener('hashchange', function() {
            let hash = window.location.hash.substring(1);
            if (!hash || !document.getElementById(hash)) {
                hash = 'dashboard';
            }
            showSection(hash);
        });
        
        function toggleDropdown() {
            const dropdown = document.getElementById('userDropdown');
            dropdown.classList.toggle('show');
        }

        window.onclick = function(event) {
            if (!event.target.matches('.user-dropdown-trigger') && !event.target.matches('.user-dropdown-trigger *')) {
                const dropdown = document.getElementById('userDropdown');
                if (dropdown.classList.contains('show')) {
                    dropdown.classList.remove('show');
                }
            }
        }

        function toggleSubmenu(element) {
            const item = element.parentElement;
            item.classList.toggle('open');
        }
    </script>
</body>
</html>